【ElementUI】el-table中复选框禁用处理

前言

Vue 项目开发过程中，尤其是后台管理开发，经常会用到 ElementUI 中的表格和表单，有时候我们需要在表格中添加复选框，来实现全选和单选当前行的操作，而这时如果有条件要限制选框是否禁用该如何处理呢？这就需要展开来说了，因为表头全选和表格行中的单个选择处理是不同的。

一、处理body中的复选框禁用

1.1 概述

在官方文档 Table-column 中有一回调函数 selectable 用于返回值用来决定这一行的 CheckBox 是否可以勾选，它仅对 type=selection 的列有效。函数有两个参数 Function(row, index)：

• row 当前行相关信息参数
• index 当前行索引值

1.2 设置复选框的 column

代码如下：

<el-table-column
   type="selection"
   width="60"
   slign="center"
   :selectable="enableSelect">
</el-table-column>

定义这个函数，并添加相关条件
当前是查看详情页面，或者编辑页面的当前行被禁用时不可操作
返回值为 false 不可操作，默认为 true 可操作