首页 前端知识 Vue3:elementplus表格header-cell-class-name回调方法使用

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

2024-08-30 20:08:01 前端知识 前端哥 278 845 我要收藏

我们在一个系统中如果要使用多个表格,那就得统一表格的样式,比如表头表示或者表格单元格的样式,如果对每一个有表格的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样式了

转载请注明出处或者链接地址:https://www.qianduange.cn//article/17289.html
标签
评论
发布的文章

JWT(JSON WEB TOKEN)详解

2024-09-10 23:09:36

NPM 常用命令(十二)

2024-09-10 23:09:24

大家推荐的文章
会员中心 联系我 留言建议 回顶部
复制成功!