在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>