如何清空el-table单选
时间: 2023-12-01 20:40:22 浏览: 148
可以通过设置`v-model`绑定的数据为`null`来清空el-table单选。具体实现方法如下:
```html
<template>
<el-table
:data="tableData"
v-model="currentRow"
highlight-current-row
@row-click="handleRowClick">
<el-table-column
prop="date"
label="日期"
width="180">
</el-table-column>
<el-table-column
prop="name"
label="姓名"
width="180">
</el-table-column>
<el-table-column
prop="address"
label="地址">
</el-table-column>
</el-table>
<el-button @click="clearSelection">清空选择</el-button>
</template>
<script>
export default {
data() {
return {
tableData: [{
date: '2021-01-01',
name: '张三',
address: '北京市朝阳区'
}, {
date: '2021-01-02',
name: '李四',
address: '上海市浦东新区'
}, {
date: '2021-01-03',
name: '王五',
address: '广州市天河区'
}],
currentRow: null
};
},
methods: {
handleRowClick(row) {
this.currentRow = row;
},
clearSelection() {
this.currentRow = null;
}
}
};
</script>
```
在上述代码中,我们通过给`el-table`组件绑定`v-model`来实现单选功能,同时在`clearSelection`方法中将`currentRow`设置为`null`来清空单选。
阅读全文