el-table实现选择列显示

我不是女神ヾ 2022-11-16 13:40 240阅读 0赞

想法：可以通过一个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][https_download.csdn.net_download_qq_41375039_16521006]

[https_download.csdn.net_download_qq_41375039_16521006]: https://download.csdn.net/download/qq_41375039/16521006