Element-UI多选框默认禁选

实现表格多选框

https://element.eleme.cn/#/zh-CN/component/table#duo-xuan

实现多选非常简单: 手动添加一个el-table-column，设type属性为selection即可；默认情况下若内容过多会折行显示，若需要单行显示可以使用show-overflow-tooltip属性，它接受一个Boolean，为true时多余的内容会在 hover 时以 tooltip 的形式显示出来。

<el-table v-loading="fetchLoading" :data="tableData" style="width: 100%" @selection-change="handleSelectionChange">
	<el-table-column type="selection" width="55" align="center" :selectable="selectDisable" ></el-table-column>
	<el-table-column label="文章标题" prop="title" width="300"></el-table-column>
	<el-table-column label="文章状态" width="100" align="center">
       <template slot-scope="{ row }">
         <span>{{ row.valid === true ? '在线' : '已下线' }}</span>
       </template>
     </el-table-column>
     <el-table-column label="操作" align="center">
       <template slot-scope="{ $index, row }">
         <el-button
           size="mini"
           type="primary"
           v-if="row.valid"
           @click="handleOffline($index, row)"
         >
           下线
         </el-button>
         <el-button size="mini" type="info" v-else disabled>
           下线
         </el-button>
       </template>
</el-table>

重点：<el-table-column type="selection" width="55" align="center" :selectable="selectDisable"></el-table-column>
在复选框 加一个事件 :selectable="selectDisable"

需求：已下线文章（即 文章状态为 false）多选框禁止选择

// 把 文章状态为 false 禁用
selectDisable(row, index) {
	return row.valid;
},

返回true即默认可选；返回false即默认不可选