在项目中使用el-table要求:点击单元格,该单元格边框和字体颜色修改。
<el-table :data="AccountInfo" :border="true" :header-cell-style="{ background: `${headerColor}`, }" :cell-style="cellStyle" :cell-class-name="tableCellClassName" @cell-click="cellClick">
</el-table>
data() {
return {
AccountInfo: [ ],
headerColor: 'linear-gradient(180deg, rgba(17, 27, 43, 0.8) -106.45%, rgba(41, 48, 66, 0.8) 161.19%)',
clickedRow: '', // 点击的单元格行号
clickedColumn: '', // 点击的单元格列名
}
},
methods: {
tableCellClassName({ row, column, rowIndex, columnIndex }) {
//注意这里是解构
//利用单元格的 className 的回调方法,给行列索引赋值
row.index = rowIndex;
column.index = columnIndex;
},
cellClick(row, column, cell, event) {
console.log(row.index);
console.log(column.index);
this.clickedRow = row.index
this.clickedColumn = column.index
},
cellStyle({ row, column, rowIndex, columnIndex }) {
if (row.index === this.clickedRow && column.index === this.clickedColumn) {
return 'border:1px solid #2C89E5;color:#2C89E5'
}else if(columnIndex === 0){
return 'background:linear-gradient(180deg, rgba(17, 27, 43, 0.8) -106.45%, rgba(41, 48, 66, 0.8) 161.19%);color: #B3C0C9;'
} else {
return ''
}
}
},