Element-UI el-table 勾选中某一项 取消选中某一项
时间: 2024-01-12 20:46:49 浏览: 78
在 Element-UI 的 el-table 中,如果要实现勾选中某一项和取消选中某一项的功能,需要使用 el-table 的 selection 属性与 @selection-change 事件。
首先,在 el-table 标签中设置 selection 属性为一个数组,用来存储被勾选的行数据,如下所示:
```html
<el-table :data="tableData" :selection="selectedList" @selection-change="handleSelectionChange">
```
其中,tableData 是 el-table 的数据源,selectedList 是存储被勾选的行数据的数组。
接下来,在 methods 中定义 handleSelectionChange 方法,用来处理勾选和取消勾选的逻辑,如下所示:
```javascript
methods: {
handleSelectionChange(selection) {
this.selectedList = selection;
}
}
```
在该方法中,我们将 el-table 的 selection 属性设置为传入的 selection 数组,这样就可以实现勾选和取消勾选的功能了。
如果需要在 el-table 中显示勾选框,可以使用 el-table-column 的 type 属性,如下所示:
```html
<el-table-column type="selection" width="55"></el-table-column>
```
这样就可以在 el-table 的每一行前面显示一个勾选框了。同时,也可以在 el-table-column 中设置 selectable 属性,来控制某一行是否可以被勾选,如下所示:
```html
<el-table-column type="selection" width="55" :selectable="row => row.status === 'active'"></el-table-column>
```
在该示例中,只有 row.status 属性值为 'active' 的行才能被勾选。
相关推荐
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)