vue中<el-table如何快速去掉多选框选中状态
时间: 2024-01-22 10:20:37 浏览: 197
vue循环中点击选中再点击取消(单选)的实现
如果你想快速去掉 el-table 多选框的选中状态,你可以使用以下两种方法之一:
1. 通过设置 v-model 的值为空数组来清空已选中的数据,例如:
```html
<el-table :data="tableData" v-model="selectedData">
<el-table-column type="selection"></el-table-column>
<!-- 其他列 -->
</el-table>
<button @click="clearSelection">清空选择</button>
<script>
export default {
data() {
return {
tableData: [
// 数据源
],
selectedData: [] // 已选择的数据
};
},
methods: {
clearSelection() {
this.selectedData = [];
}
}
};
</script>
```
2. 通过调用 el-table 的 clearSelection 方法来清空已选中的数据,例如:
```html
<el-table :data="tableData" v-model="selectedData">
<el-table-column type="selection"></el-table-column>
<!-- 其他列 -->
</el-table>
<button @click="clearSelection">清空选择</button>
<script>
export default {
data() {
return {
tableData: [
// 数据源
],
selectedData: [] // 已选择的数据
};
},
methods: {
clearSelection() {
this.$refs.table.clearSelection();
}
}
};
</script>
```
其中,`$refs.table` 是 el-table 组件的引用,可以通过 `ref` 属性来获取。
阅读全文