【Vue+Element-UI】Table表格：复选框及禁用复选框

前言

客户需求： Table表格数据支持复选删除，状态为“已提交”的数据不能删除。
实现思路： 参考Element-UI官方Table表格组件。

---

一、设置table-column属性

1.设置type="selection"

如果设置了 selection 则显示多选框

代码如下（示例）：

<table :data="dataList">
	<el-table-column type="selection" label="选择" align="center" :selectable="checkSelectable" />
table>

2.添加selectable方法

仅对 type=selection 的列有效，类型为 Function，Function 的返回值用来决定这一行的 CheckBox 是否可以勾选。

代码如下（示例）：

// 参数row中可以获得这一行的数据,index为这一行的下标
checkSelectable(row, index) {
	return row.status!== '1'
},

return false ：为禁用

---

总结

工欲善其事，必先利其器

---

系列文章目录

【Vue+Element-UI】Table表格：动态Table