elementui的table组件中，type属性为selection的列不能v-if控制显示

Question

### 问题描述
el-table-column，设type属性为selection后，不能通过v-if或v-show隐藏
### 问题出现的环境背景及自己尝试过哪些方法

### 相关代码
粘贴代码文本

<el-tabs v-model="activeName" @tab-click="handleFilter">
  <el-tab-pane label="待处理" name="0"/>
  <el-tab-pane label="已处理" name="1"/>
</el-tabs>

 <el-table v-loading="loading" ref="multipleTable" :data="tableData" highlight-current-row border fit @selection-change="handleSelectionChange">
  <el-table-column v-if="activeName==='0'" type="selection"/>
  <el-table-column label="姓名" prop="memberName" align="left" width="120px"/>
  <el-table-column label="单位" prop="deptName" align="left"/>
  <el-table-column label="校验类型" prop="verifyResultType" align="left">
    <template slot-scope="scope">
      {{ scope.row.verifyResultType | verifyResultTypeFilter }}
    </template>
  </el-table-column>
  <el-table-column label="校验方式" prop="verifyType" align="left">
    <template slot-scope="scope">
      {{ scope.row.verifyType | verifyTypeFilter }}
    </template>
  </el-table-column>
  <el-table-column label="校验时间" prop="verifyAddTime" align="left"/>
  <el-table-column v-if="activeName==='1'" prop="verifyProcessUser" label="处理人" align="left"/>
  <el-table-column v-if="activeName==='1'" prop="verifyProcessTime" label="处理时间" align="left"/>
  <el-table-column v-if="activeName==='0'" label="操作" align="left">
    <template slot-scope="scope">
      <el-button v-if="activeName==='0'" type="text" @click="handleDeal(scope)">处理</el-button>
      <el-button v-if="activeName==='0'" type="text" @click="handleIgnore(scope)">忽略</el-button>
      <!-- <el-button type="text" @click="handleView(scope)">查看</el-button> -->
    </template>
  </el-table-column>
</el-table>

Answer 1

根据你提供的代码，如果两个tab切换使用的是同一个table列表，可以通过添加class并设置 display: none来控制样式。

第一种方法：
利用 table 属性里面的cell-class-name和 header-cell-class-name属性

<el-table v-loading="loading" ref="multipleTable" :data="tableData"
    :cell-class-name="cellClass"
    :header-cell-class-name="cellClass">
    <el-table-column type="selection" label-class-name="table-selection"/>
</el-table>

methods: {
    cellClass(row){
        if (this.activeName==='0' && row.columnIndex === 0) {
            return 'table-selection'
        }
    }
}

<style> 
    .el-table {
        .el-table-column--selection.table-selection {
            display:none;
        }
     }
</style>

第二种方法：
使用table的cell-style和header-cell-style属性

<el-table v-loading="loading" ref="multipleTable" :data="tableData"
    :cell-style="cellStyle"
    :header-cell-style="cellStyle">
    <el-table-column type="selection" label-class-name="table-selection"/>
</el-table>

methods: {
    cellStyle({ row, column, rowIndex, columnIndex }){
        if (this.activeName==='0' && column.type === 'selection') {
            return { // 返回对象
              display: 'none'
            }
        }
    }
}

第三种方法：
checkbox不隐藏，disabled属性设为true不给选

<el-table v-loading="loading" ref="multipleTable" :data="tableData">
    <el-table-column type="selection" width="55" :selectable="disabledCheckBox" /> <!-- 注：selectable的类型必须是function -->
</el-table>

methods: {
    disabledCheckBox(row, index) {
        if (this.activeName==='0') {
            return true
        } else {
            return false
        }
    }
}

第四种：
每个tab页分别使用单独的table

<el-tabs v-model="activeName" @tab-click="handleFilter">
    <el-tab-pane label="待处理" name="0">
        <el-table v-loading="loading0" ref="multipleTable0" :data="tableData0">
            <el-table-column type="selection"/>
        </el-table>
    </el-tab-pane>
    <el-tab-pane label="已处理" name="1">
        <el-table v-loading="loading1" ref="multipleTable1" :data="tableData1">
            ...
        </el-table>
    </el-tab-pane>
</el-tabs>