element ui 多选表格 设置某一行是否可选的方法

目录

 

1. element ui table组件的网址

2. 设置某一行是否可选的正确方式

3.正确方式的代码和效果展示

1）html代码

2）js代码

3）css代码

4. 错误方式（不可采用，切勿踩坑）

---

1. element ui table组件的网址

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

2. 设置某一行是否可选的正确方式

使用Table-column Attributes中的selectable属性

3.正确方式的代码和效果展示

为了方便，我修改了element ui 官网中的例子展示一下。

可以把下面的代码粘贴到这个网页（https://codepen.io/pen/）中对应的位置，可以看到效果。

重点：

<el-table-column type="selection  :selectable="handleSelection"  width="55">

selectable属性的方法，handleSelection默认两个参数，第一个row，第二个index

返回值：true表示可选，false表示不可选。

因此，可以根据row的某些属性或者index来动态设置哪些行是不可选的。

1）html代码

<script src="//unpkg.com/vue/dist/vue.js"></script>
<script src="//unp