vue --》elementUI 中 el-table组件 如何实现点击列,让该列高亮显示 ?

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

  

 

posted @ 2019-11-11 09:49  我是一名好程序员  阅读(5462)  评论(0编辑  收藏  举报