Element-UI el-table的Checkbox 取消选中 某一项 代码
时间: 2024-01-12 09:02:56 浏览: 94
可以通过以下代码取消 `el-table` 中某一行的选中状态:
```html
<template>
<div>
<el-table :data="tableData" @selection-change="handleSelectionChange">
<el-table-column type="selection"></el-table-column>
<el-table-column prop="date" label="日期"></el-table-column>
<el-table-column prop="name" label="姓名"></el-table-column>
<el-table-column prop="address" label="地址"></el-table-column>
</el-table>
</div>
</template>
<script>
export default {
data() {
return {
tableData: [
{
date: '2020-01-01',
name: '张三',
address: '北京市朝阳区'
},
{
date: '2020-01-02',
name: '李四',
address: '上海市浦东新区'
},
{
date: '2020-01-03',
name: '王五',
address: '广州市天河区'
}
]
}
},
methods: {
handleSelectionChange(selection) {
// 取消选中第一行
const firstRow = this.tableData[0]
const index = selection.indexOf(firstRow)
if (index > -1) {
selection.splice(index, 1)
}
}
}
}
</script>
```
在 `el-table` 中使用 `type="selection"` 开启多选模式,并在 `@selection-change` 事件中处理选中状态。当需要取消第一行的选中状态时,找到该行数据并在 `selection` 数组中删除即可。
阅读全文