❤ ❤ ElementUI Table表格操作

一、实战部分一

1、表格基础属性

（1） 表格赋值数据

data

<el-table v-loading="loading" :data="dataList" border></el-table>
dataList: [{
            date: '2016-05-02',
            name: '王小虎',
            address: '上海市普陀区金沙江路 1518 弄'
          }, {
            date: '2016-05-04',
            name: '王小虎',
            address: '上海市普陀区金沙江路 1517 弄'
          }, {
            date: '2016-05-01',
            name: '王小虎',
            address: '上海市普陀区金沙江路 1519 弄'
          }, {
            date: '2016-05-03',
            name: '王小虎',
            address: '上海市普陀区金沙江路 1516 弄'
          }]

增加边框样式

border:  仅仅是侧边栏的边框

<el-table v-loading="loading" :data="dataList" border>

2、表头样式处理

① 表头居中

align="center"

// 添加地方
<el-table-column label="序号" align="center" prop="id"/>

② 显示缩略文字

width="50" :show-overflow-tooltip="true"

// 添加地方
<el-table-column label="序号" width="50" align="center" prop="id" :show-overflow-tooltip="true"/>

方式一：使用方式一

<el-table 
 :header-cell-style="{backgroundColor:'#eee'}"></el-table>

方式二：使用方式二

3、表格每一行显示居于顶部

.el-table--border /deep/ .el-table__cell {
    font-size: 12px;
    vertical-align: top;
    
}

4、鼠标滑动效果