el-table实现选择列显示

想法：可以通过一个checkbox控制一列的显示与隐藏

选择列按钮

<el-dropdown trigger="click" style="margin-left: 10px;">
   <el-button>
     <span>选择列显示</span><i class="el-icon-arrow-down el-icon--right" />
   </el-button>
   <el-dropdown-menu slot="dropdown">
     <div class="checkboxGroup">
       <el-checkbox v-for="(column,index) in columns" :key="index" v-model="column.checked">{{ column.label }}</el-checkbox>
     </div>
   </el-dropdown-menu>
 </el-dropdown>

表格

<el-table
  :data="tasks"
  border
  :cell-style="alignCenter"
  :header-cell-style="alignCenter"
  style="width: 100%;margin-top:20px;"
  @cell-click="enter"
>
  <el-table-column
    v-if="columns[0].checked"
    prop="name"
    label="任务名"
    min-width="40"
  />
  <el-table-column
    v-if="columns[1].checked"
    prop="type"
    label="工期（人天）"
    min-width="14"
  />

  <el-table-column
    v-if="columns[2].checked"
    prop="type"
    label="开始时间"
    min-width="20"
  />

  <el-table-column
    v-if="columns[3].checked"
    prop="type"
    label="结束时间"
    min-width="20"
  />
  <el-table-column
    v-if="columns[4].checked"
    prop="type"
    label="前置任务"
    min-width="20"
  />
  <el-table-column
    v-if="columns[5].checked"
    prop="type"
    label="任务状态"
    min-width="14"
  />
  <el-table-column
    v-if="columns[6].checked"
    prop="type"
    label="完成度（%）"
    min-width="14"
  />
  <el-table-column
    label="操作"
    min-width="20"
  >
    <template slot-scope="">
      <el-button type="text" size="small" @click="dialogVisible = true">进度汇报</el-button>
    </template>
  </el-table-column>
</el-table>

checkbox绑定数据

columns: [
   { label: '任务名', checked: true },
   { label: '工期（人天）', checked: true },
   { label: '开始时间', checked: true },
   { label: '结束时间', checked: true },
   { label: '前置任务', checked: true },
   { label: '任务状态', checked: true },
   { label: '完成度（%）', checked: true }
 ]

完整代码详见：https://download.csdn.net/download/qq_41375039/16521006