Vue3:elementplus表格header-cell-class-name回调方法使用
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样式了
更多推荐
已为社区贡献13条内容
所有评论(0)