Vue3：elementplus表格header-cell-class-name回调方法使用

我们在一个系统中如果要使用多个表格，那就得统一表格的样式，比如表头表示或者表格单元格的样式，如果对每一个有表格的vue文件都设置样式未免太麻烦，所以我们可以使用elementplus表格中自带的属性

通过这些回调方法去统一设置样式

单个表格

这里我们以header-cell-class-name为例子进行举例

在单一页面的使用过程如下：

①在表格中绑定header-cell-class-name属性

<el-table :data="tata" 
:header-cell-class-name="随便取的名字" >

②在js中定义回调函数

const 随便取的名字 = ({ row, column, rowIndex, columnIndex }) => {
    //返回css中写好的样式
    return 'css中写好的样式'
}

③在css中写好的样式

.css中写好的样式{
  width:100px;
  }

多个表格

多个表格是指在不同的页面都有表格

我们可以在把公共的样式封装在一个js文件中，然后在需要使用的页面中导入

这里我们以header-cell-style为例子进行举例

使用object的方式

// 在tableCommon.js文件
export const 随便取的名字 = {
    width:100px;
    background:pink;
}
// 在需要的页面
import { 随便取的名字 } from 'js文件的路径'
// 然后在el-table的标签中 绑定:header-cell-style='随便取的名字'

这样导入的每个页面都有这个css样式了