功能要求:需要给el-table中的其中一列的新增颜色(不同类型不同颜色),但是这列的位置是根据不同用户变化的,用户A登录在第二列、用户B登录在第七列。
<el-table :data="listData" v-loading="dataLoading" :cell-class-name="myclass"></el-table>
解决方法:
myclass({ row, column, rowIndex, columnIndex }) {
//在需要属性中判断
if (column.property === 'type') {
//需要拿到id="el-table_1_column_1" 最后的数字-1就是当前的位置
const columnArr = column.id.split('_')
let currentIndex = Number(columnArr[columnArr.length - 1]) - 1 //获取type属性位置
//根据不同类型判断
if (row.type == '语文' && columnIndex === currentIndex) {
return 'color1'
} else if (row.type == '英文' && columnIndex === currentIndex) {
return 'color2'
} else if (row.type == '数学' && columnIndex === currentIndex) {
return 'color3'
} else if (row.type == '体育' && columnIndex === currentIndex) {
return 'color4'
} else if (row.type == '自习' && columnIndex === currentIndex) {
return 'color5'
}
}
}
以上是编程学习网小编为您介绍的“el-table列表给指定列的文字添加样式,但是列是动态的”的全面内容,想了解更多关于 vuejs 内容,请继续关注编程基础学习网。
编程基础网
本文标题为:el-table列表给指定列的文字添加样式,但是列是动态的
基础教程推荐
猜你喜欢
- 使用ajax跨域调用springboot框架的api传输文件 2023-02-23
- CSS中的一些百分比相关调试经验分享 2023-12-08
- vue 后台返回的一维数组怎样变成二维数组 2023-10-08
- 在模板页面的js使用办法 2023-11-30
- 从vue-router看前端路由的两种实现 2023-12-27
- Jquery判断IE6等浏览器的代码 2023-12-27
- 网页布局入门教程 如何用CSS进行网页布局 2023-12-09
- vuejs下一页功能实现代码介绍 2025-01-11
- 一文搞懂 parseInt()函数异常行为 2023-07-10
- web中自定义鼠标样式将其显示为左右箭头 2023-12-08
