一起养成写作习惯！这是我参与「掘金日新计划 · 4 月更文挑战」的第5天，点击查看活动详情。

一、el-table的row-class-name属性挂载表格行样式的问题

代码

<el-table ref="singleTable" :data="tableData" :row-class-name="tableRowClassName">
// 表格整行背景色闪烁
tableRowClassName ({row, rowIndex}) {
	if (row['confirm'] === '0') {
		// 未确认
		return 'bling-row'
	}
}
/* 表格背景颜色闪烁 */
.el-table .bling-row {
  animation: bgflash 1s infinite;
}
@keyframes bgflash {
  50% {color: #f56c6c;}
}

问题

如上给表格挂载行背景闪烁的效果时，当第一页10条数据，第二页4条数据，查看第二页后查看第一页数据，前4条和后6条背景闪烁动画不同步。

原因

通过F12查看节点，翻页时，从第二页往前翻页，前四条数据的标签并没有重新渲染。

导致，前4条按照之前的节奏闪烁，后6条按照翻页时间点开始闪烁。

由此可见后6条数据连同重新渲染，重新添加了样式bling-row，所以动画从头开始。

如需要前4条数据重新渲染，只需在每次翻页查询数据赋值时，先将表格数据集置为空即可。

修改代码

// 翻页请求时注意加上置空处理即可\
this.tableData = [] // 请求前先置空表格数据\
this.tableData = res.data.page.list

二、el-table固定最右的操作栏上下错行的问题

现象一：

在el-dialog弹出框中使用到el-table列表时，右侧操作栏设置了fixed="right"，第一次打开弹框正常，关闭后再次打开，发现操作栏全都往下移动了一行，导致表格行错位。

解决

官方文档有提供方法doLayout，但没明确什么情况下使用，或许此时就能用。

监听data变化后，需要重新渲染el-table时，调用doLayout该方法即可。

代码

watch: {
  '$attrs.data': {
    handler (val) {
      this.$refs.comTable.doLayout() // 解决二次弹框时操作栏因为fixed错位
    }
  }
},

现象二：

打开F12，使宽度变窄，导致表头某列换行时，频繁切换F12，导致表格行错位。

解决

此时数据没有改变页面没有重新渲染，除非去监听窗口宽度变化。

但是只有在表头某列换行时，才会产生错位。

于是考虑设置表头列的最小宽度即可。

代码

{
  id: '3',
  label: '关联算法名称',
  prop: 'algoName',
  minWidth: '200'
},
{
  id: '2',
  label: '关联算法编号',
  prop: 'algoCode',
  minWidth: '200'
},

三、el-table表格宽度拖动功能

官方文档有如下几个属性（Table-column Attributes）：

resizable：对应列是否可以通过拖动改变宽度（需要在el-table上设置border属性为真）

show-overflow-tooltip：当内容过长被隐藏时显示tooltip

注意：

1、Table-column属性也就是说是设置在标签上的！！！
2、如需使用resizable的拖动改变宽度功能，必须在el-table上设置属性border为真，不是样式设置border，是属性！！！

例如：

<el-table element-loading-text="拼命加载中..." ref="table" :data="tableData" highlight-current-row :border="true">
    <el-table-column v-for="column in columns" :key="column.id" :property="column.prop" :label="column.name" :resizable="true" show-overflow-tooltip>
    </el-table-column>
</el-table>

四、border-image导致el-table表头的边框时有时无

现象：el-table__header左右边框有时候不显示
区别：表头的高宽不一样
改：border-image: linear-gradient(150deg, #1ddae4 , #2698ec) 30 30;
为：border-image: linear-gradient(150deg, #1ddae4 , #2698ec) 5; 就可以了……

原因：

border-image: linear-gradient()后面的四个参数分别表示top right bottom left

有一些高宽限制肯定不能超过外层div的高宽，然而具体的限制，参考如下博文，我试了下还是不对，暂时找不到其他资料。

www.cnblogs.com/zhangdongya…

包括这四个参数设置 30 30px 1/30px的差别为什么中间那个不可以，另外两个分别显示的什么还是不清楚。哎。

【element ui】问题集锦（el-table）