vue+element 设置table表格表头，实现用Checkbox控制表格某列显示或者隐藏

一、需求说明

由于表格列表字段过多，网页宽度不足以一眼看到我所关注的重要的信息。故需要隐藏掉不想看到的某几列。

二、实现的效果

三、实现思路

3.1.在需要隐藏的表头使用v-if来控制是否显示；
3.2.在名称列插入Popover弹出框，弹出框里面再使用checkbox来通过勾选控制.
相关代码如下：

3.3 HTML表格相关部分
<el-table ref="filterTable" :data="resultsData" stripe border style="width: 100%">
      <el-table-column type="index" label="序号"> </el-table-column>
      <el-table-column prop="name" label="名称">
        <template slot="header" slot-scope="scope">
          <!-- 这里的{{scope.row}}作用是为了解决scope没有被使用时的报错，若不使用slot-scope会导致多选框选不中的异常 -->
          名称{{scope.row}}
          <el-popover placement="bottom" width="150" trigger="click">
            <el-checkbox-group v-model="checkedOptions" @change="handleCheckedData">
              <el-checkbox v-for="item in headerOptions" :label="item.value" :key="item.value" class="checkbox-line">{{item.label}}</el-checkbox>
            </el-checkbox-group>
            <el-button type="text" slot="reference"><i class="el-icon-arrow-down"></i></el-button>
          </el-popover>
        </template>
        <template slot-scope="scope">
          <span>{{scope.row.name}}</span>
        </template>
      </el-table-column>
      <el-table-column prop="test" label="测试" v-if="isShowForm.test"> </el-table-column>
      <el-table-column prop="created_date" label="创建日期" v-if="isShowForm.created_date"> </el-table-column>
      <el-table-column prop="last_edited_date" label="最后编辑日期" v-if="isShowForm.last_edited_date"> </el-table-column>
    </el-table>

3.4 js部分变量部分
   <script>
export default {
  data () {
    return {
        // 控制是否显示列
      isShowForm: {
        test: true,
        created_date: true,
        last_edited_date: true
      },
      // 选中的表头值
      checkedOptions: [],
      // 表头显隐参数
      headerOptions: [{
        label: '测试',
        value: 'test'
      }, {
        label: '创建日期',
        value: 'created_date'
      }, {
        label: '最后编辑日期',
        value: 'last_edited_date'
      }],
    }
    }
  }

3.5 js方法部分
 // 当表头标签被勾选中的时候，控制列表隐藏
    handleCheckedData (val) {
      this.isShowForm.test= val.includes('test') ? 0 : 1
      this.isShowForm.created_date = val.includes('created_date') ? 0 : 1
      this.isShowForm.last_edited_date = val.includes('last_edited_date') ? 0 : 1
    }

以上为个人工作学习中的记录，嘻嘻···