zoukankan      html  css  js  c++  java
  • vue --》elementUI 中 el-table组件 如何实现点击列,让该列高亮显示 ?

      在elmentui官网中,只给了让当前行高亮显示的方法,但是如何让当前列高亮显示呢?

      

    <template>
        <div>
               <el-table 
                :data="tableData"
                class="table_val m-t-20" size="mini"      style=" 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>

      

  • 相关阅读:
    RAID磁盘阵列
    Activiti任务认领
    Activiti 5.18启动流程到完成所有任务之间的数据库变化(转)
    tomcat优化(转)
    DB2 OLAP函数的使用
    PreparedStatement批量处理和事务
    获取JavaScript异步函数的返回值
    DB2 sql报错后查证原因与解决问题的方法
    DB2有五种约束
    连接db2数据库出现No buffer space available (maximum connections reached?)
  • 原文地址:https://www.cnblogs.com/wangqi2019/p/11833038.html
Copyright © 2011-2022 走看看