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>

      

  • 相关阅读:
    android数据恢复
    UVA 690 Pipeline Scheduling
    2017 国庆湖南 Day4
    2017 国庆湖南 Day5
    2017 国庆湖南 Day6
    2017国庆 清北学堂 北京综合强化班 Day1
    2017 国庆湖南Day2
    bzoj 2962 序列操作
    UVA 818 Cutting Chains
    UVA 211 The Domino Effect
  • 原文地址:https://www.cnblogs.com/wangqi2019/p/11833038.html
Copyright © 2011-2022 走看看