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>