element ul 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 // 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;

  }

你可能感兴趣的:(element-ui)