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>

Answer 2

也不是没有办法，举两个例子
1.用两个table，用if切换
2.在你这个基础上加个监听，每次activeName或者什么周期发生update时，重新绘制table

eq:  this.$refs.multipleTable.doLayout()

Answer 3

可以通过v-if来控制是否隐藏，v-show的确是不可以，用v-if来控制是否隐藏的时候需要注意的是每列都要给定一个唯一的key值，不然table内容样式会错乱。

像这样，每列给定一个唯一key:
<el-table-column :key="Math.random()" v-if=""></el-table-column>

Answer 4

你的思路没问题，不需要考虑其他复杂的方法，再找找是不是哪里出了问题，最好贴下完整代码。