vue使用element-ui中el-table實現點擊表頭或點擊一列選中全列的功能

現在有這麼個需求，點擊表格一列的表頭或其中一列，選中全列，ux如下，默認選第一列

 

 直接上代碼

<!--表格-->
<el-table
  :data="tableData"
  @cell-click="(row, column) => handleClick({column})">
  <el-table-column
    v-for="(item,i) in columnList"
    :key="i"
    :prop="item.prop"
    :class-name="item.current ? 'cellSelected' : ''">
    <template #header="data">
      <div @click="handleClick(data)">{{ item.prop }}</div>
    </template>
  </el-table-column>
</el-table>

js部分

export default {
  data() {
    return {
      columnList: [
        { current: true, prop: 'name' },
        { current: false, prop: 'age' },
        { current: false, prop: 'tall' },
        { current: false, prop: 'class' }
      ],
      tableData: [
        { name: '張三丰', age: 32, tall: 176, class: 4 },
        { name: '張翠山', age: 22, tall: 176, class: 3 },
        { name: '張無極', age: 12, tall: 176, class: 2 },
      ]
    };
  },
  methods: {
    handleClick({ column }) {
      this.columnList.forEach(item => {
        if (item.prop === column.property) {
          item.current = true;
        } else {
          item.current = false;
        }
      });
    },
  }
};

css部分

.cellSelected {
  border-color: #409EFF !important;
  border-left:1px solid;
  border-right:1px solid;
  background: #ecf5ff !important;
  color: #409EFF !important;
  font-weight: 600;
}
th.cellSelected {
  border-top:1px solid;
}

後面如果想要獲取整列的值，可以通過prop值去table的數據數組裏取