el-table的多选框实现单选
时间: 2023-10-21 08:34:37 浏览: 159
可以设置 el-table 的 selectable 属性为 "multiple",然后在 table-column 中的 type 属性设置为 "selection",这样 el-table 就会展示出多选框,但是可以通过设置 select-on-click-row 属性为 true,实现单选的效果。
相关问题
el-table多选框实现单选
可以通过监听 el-table 的 @row-click 事件来实现 el-table 多选框的单选功能。具体步骤如下:
1.在 el-table 中添加 type="selection",开启多选框功能。
2.在 el-table 中添加 @row-click="handleRowClick" 监听行点击事件。
3.在 methods 中添加 handleRowClick 方法,通过 $refs 获取到 el-table 的 selection 组件,然后将当前行的数据设置为选中项。
下面是示例代码:
```html
<template>
<el-table
ref="table"
:data="tableData"
@row-click="handleRowClick"
style="width: 100%">
<el-table-column
type="selection"
width="55">
</el-table-column>
<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>
</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: '广州市天河区'
}],
selection: []
}
},
methods: {
handleRowClick(row) {
this.$refs.table.toggleRowSelection(row)
this.selection = this.$refs.table.selection
}
}
}
</script>
```
在上面的代码中,我们通过监听 @row-click 事件来实现了 el-table 多选框的单选功能。在 handleRowClick 方法中,我们通过 $refs 获取到 el-table 的 selection 组件,然后将当前行的数据设置为选中项。最后,我们将选中的数据保存在 selection 变量中,以便后续使用。
el-table多选框实现单选效果
### 实现 Element UI `el-table` 组件中的单选效果
为了实现在 `el-table` 中仅能选择一个选项的效果,可以修改表格的选择行为来确保每次只保留一项被选中。具体方法如下:
#### HTML 部分
通过监听 `@select` 事件而不是默认的 `@selection-change` 来控制每一行的选择状态。
```html
<el-table ref="singleSelectTable" :data="tableData" border @select="handleSingleSelect">
<!-- 表格列定义 -->
</el-table>
```
#### JavaScript 部分
在处理函数 `handleSingleSelect` 中加入逻辑以清除之前所有的选择并设置当前行作为唯一选中项。
```javascript
// 当前选中的行对象
let selectedRow;
function handleSingleSelect(selection, row) {
let singleSelectTable = this.$refs.singleSelectTable;
if (selectedRow !== row && selection.length > 0) {
// 清除之前的选中状态
singleSelectTable.clearSelection();
// 设置新的选中状态
this.$nextTick(() => {
singleSelectTable.toggleRowSelection(row, true);
selectedRow = row;
});
}
}
```
上述代码片段展示了如何利用 Vue.js 和 Element UI 的 API 来实现这一功能[^1]。
阅读全文
相关推荐













