在elmentui官网中，只给了让当前行高亮显示的方法，但是如何让当前列高亮显示呢？
<template>
<div>
<el-table
:data="tableData"
class="table_val m-t-20" size="mini"
style="width: 80%;margin-left:100px"
:height="300" empty-text="无符合条件数据"
@cell-click="handleClick" //点击单元格所触发的事件 四个参数 行 列 元素对象 事件对象
> <el-table-column v-for="(it,id) in columnList"
:key="id"
:column-key='it.key' //设置每一列的key，根据这个key来找到对应列的下标，进而设置背景色
:prop="it.prop"
:label="it.prop"
:class-name="it.current?'bacColorf4984e':''"> </el-table-column>
</el-table>
</div>
</template> <script>
export default {
data() {
return {
tableData: [],
columnList: [
{ current: true, prop: "a" ,key:'one'},
{ current: false, prop: "b",key:'two' },
{ current: false, prop: "c" ,key:'three'},
{ current: false, prop: "d" ,key:'four'}
]
};
},
created () {
},
methods: {
handleClick(row, column, cell, event) {
//根据key来找下标
this.columnList.filter(item => {
if(item.key == column.columnKey){
item.current = true
}else{
item.current = false
}
}); //根据classname获取下标
// let str = cell.className;
// let arr = str.split("");
// let index = Number(arr[18]);
// if (this.columnList[index - 1].current == true) {
// return;
// } else {
// this.columnList.filter(item => {
// item.current = false;
// });
// }
// this.columnList[index - 1].current = true
},
getList() {
this.tableData = [
{ "a": 1, "b": 2, "c": 3, "d": 4, key: "one" },
{ "a": 1, b: 2, c: 3, d: 4, key: "two" },
{ "a": 1, b: 2, c: 3, d: 4, key: "three", children: [{ "a": 1, b: 2 }] },
{ "a": 1, b: 2, c: 3, d: 4, key: "four" }
];
},
},
created () {
this.getList();
},
};
</script> <style > .rgb196 {
background: rgb(196, 196, 196);
}
.bacColor317eb0 {
background: #317eb0;
}
.bacColorf4984e {
background: #f4984e;
}
</style>