el-table 列筛选

参考文章：
vue实现checkbox点击选择控制element-ui table表单动态列展示与隐藏
vue+element 通过checkbox控制el-table-column的显示或隐藏

第一个写法简单，但是在调节列样式时（比如状态的颜色），就不太方便了。
第二个更适用一些，但是在强制更新数据时会产生表格抖动，参照第一个博客中的更新方式会更好一些。

<!-- 筛选按钮 -->
<el-popover placement="left-start" title="列筛选" trigger="click">
  <el-checkbox-group v-model="checkList" @change="columnFilter">
  <el-checkbox v-for="(item, index) in tableList" :label="item.field">{{item.title}}</el-checkbox>
  </el-checkbox-group>
  <el-button slot="reference"><i class="el-icon-menu"></i></el-button>
</el-popover>

<el-table
  :data="dataList"
  :key="key"
>
  <el-table-column 
    prop="serialNumber" 
    label="工单编号" 
    v-if="columnShow.serialNumber" 
  >
  </el-table-column>
  <el-table-column 
    prop="systemName" 
    label="系统名称" 
    v-if="columnShow.systemName" 
  >
  </el-table-column>
  
</el-table>

key: 1, // table key
tableList: [
  {title: '工单编号', field: 'serialNumber'},
  {title: '系统名称', field: 'systemName'}
],
checkList: [],//筛选列选中的数据列表
columnShow: {},//控制筛选列显示隐藏

mounted: function () {
  this.columnFilter()
},
methods: {
  //列筛选
  columnFilter(val) {
    if (val == undefined) {
      this.tableList.forEach(element => {
        // 默认选中全部列
        this.checkList.push(element.field);
        this.columnShow[element.field] = true;
      });
    } else {
      Object.keys(this.columnShow).forEach(element => {
        this.columnShow[element] = false;
      });
      this.checkList.forEach(element => {
        // 判断是否有某个字段
        if (element in this.columnShow) {
          this.columnShow[element] = true;
        }
      });
    }
    this.key = this.key + 1
  }
},

/* 列筛选复选框 */
.el-popover .el-checkbox {
  display: block;
  margin-bottom: 5px;
}