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

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

第一种方法：
利用 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>

第五种(建议使用)：
在 el-table-column 标签里面加上一个 key 值为随机数,就能用v-if

<el-table border @selection-change="handleSelectionChange" :data="tableData" style="width: 100%">
    <el-table-column type="selection" v-if="flag" :key="Math.random()" ></el-table-column>
</el-table>


export default {
 	data() {
  		return {
			flag: false,
		}
  	}
 }