❤ElementUI Table表格

❤ ❤ 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、鼠标滑动效果

鼠标滑动效果

.el-table  ::v-deep .el-table__body tr:hover > td {
     background-color: #fff !important;
 } 

5、表格高度

.el-table .cell.el-tooltip{
white-space: nowrap;
    min-width: 50px;
    height: 100px;
}

二、Table表格跨页多选回显清除选中数据问题

1、❤ 实现

表格组件：

<el-table v-loading="loading" :data="userList" @selection-change="handleSelectionChange1" ref="multipleTable"  row-key='id'>
</el-table>

❤ 方法1

• 利用 reserve-selection与row-key结合

  ① 在表格加上属性 row-key='id'或者加上 :row-key="(row) => { return row.id }" row-key绑定每行数据的唯一标识

  ② 在多选的column标签加上 :reserve-selection=“true” 开启

  ③ 表格的多选函数上写上方法toggleRowSelection(row,true)

  sedata.forEach(key => {
      tabledata.forEach(row => {
          if (row.id == key) {
           setTimeout(() => {
             _this.$refs.multipleTable.toggleRowSelection(row,true)}, 300);
            }
        })
  });
  

❤ 方法2 自己手写一个循环判断

2、可能遇到的问题

❤无法清空table多选框的选中状态

当前页面清空
this.$refs.multipleTable.clearSelection();

在父组件清空：
this.$refs.issueList.$refs.multipleTable.clearSelection();

❤ [Vue warn]: Error in nextTick: “TypeError: Cannot read properties of undefined (reading ‘toggleRowSelection

• 原因：【由于DOM并没有更新完引起的】

• 解决方法：

  [1]
  this.$nextTick(() => {}) ;
  
  [2]定时器【我用的这个】
  setTimeout(() => {},300); 
  
  

❤ 遇到表格无法跨页回显【特殊】

找了几遍没发现错误，最后怀疑是table并非一次全部选中

❤解决方法：
这个时候检查一下，在分页时候是否将分页选中放到了我们每次点击分页以后查询表格的接口之中

3、进一步衍生

进一步衍生部分

4、总结

该部分是总结部分

三、后续更新

• 表头居中
• 计划二