element ul el-table选中改变表格行样式

最新推荐文章于 2025-07-01 17:35:29 发布

json-yc

最新推荐文章于 2025-07-01 17:35:29 发布

阅读量6.1k

点赞数 2

CC 4.0 BY-SA版权

分类专栏： element-ui

本文链接：https://blog.youkuaiyun.com/weixin_44968614/article/details/95127704

element-ui 专栏收录该内容

1 篇文章

订阅专栏

博客主要围绕Vue中表格操作展开，通过定义`handleSelectionChange`方法收集选中行的`index`值，`rowRed`方法根据收集的`index`数组改变选中行样式，`tableRowClassName`方法动态添加`index`到行数据中，实现表格选中行样式变换。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<el-table
:data=“tableData”
:cell-style =“rowRed”//改变样式
:cell-class-name=“tableRowClassName”//添加下标
@selection-change=“handleSelectionChange”//收集下标
>

/**
* @author: YC
* @description: 收集选中的index值作为数组传递给rowRed判断变换样式
* @date: 2019/7/9
/
handleSelectionChange(row) {
// console.log(row);
// console.log(row.index);
this.indexList=[];
for (let item of row){
this.indexList.push(item.index);
}
// this.indexList=[…new Set(this.indexList)];
// console.log(this.indexList);
},
/*
* @author: YC
* @description:cell-style通过返回值可以实现样式变换利用传递过来的数组index循环改变样式
* @date: 2019/7/9
/
rowRed({row,rowIndex}){
for (let i=0;i<this.indexList.length;i++){
// console.log(this.indexList[i]);
if (rowIndex===this.indexList[i]){
return {backgroundColor:’#d2f5ff’,color:’#1890ff’}
}
}
},
/*
* @author: YC
* @description: 动态添加index到row里面去
* @date: 2019/7/9
*/
tableRowClassName({row, rowIndex}){
// console.log(rowIndex);
row.index = rowIndex;