el-table的多选框实现单选
时间: 2023-10-21 09:34:37 浏览: 43
可以设置 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 多选框单选
为了将el-table的多选框变为单选,可以按照以下步骤进行操作:
1.在el-table中添加一个selection-change事件,用来监听选中项的变化。
2.在事件处理程序中,判断当前选中的行数是否为1,如果不是,则使用table的clearSelection方法清除所有选中的数据,然后使用table的toggleRowSelection方法选中当前行。
3.为了解决数据回显的问题,需要在选中行时将选中的行数据存储到一个变量中,然后在下一次渲染表格时,将该变量中的数据传递给table的selected-rows属性即可。
下面是一个示例代码,可以将其添加到el-table的模板中:
```html
<template>
<el-table
:data="tableData"
:row-key="row => row.id"
@selection-change="handleSelectionChange"
:selected-rows="selectedRows"
ref="table"
>
<el-table-column type="selection" width="55"></el-table-column>
<el-table-column prop="name" label="姓名"></el-table-column>
<el-table-column prop="age" label="年龄"></el-table-column>
<el-table-column prop="address" label="地址"></el-table-column>
</el-table>
</template>
<script>
export default {
data() {
return {
tableData: [
{ id: 1, name: '张三', age: 18, address: '北京市' },
{ id: 2, name: '李四', age: 20, address: '上海市' },
{ id: 3, name: '王五', age: 22, address: '广州市' },
{ id: 4, name: '赵六', age: 24, address: '深圳市' }
],
selectedRows: []
}
},
methods: {
handleSelectionChange(val) {
if (val.length !== 1) {
this.$refs.table.clearSelection()
this.$refs.table.toggleRowSelection(val[0])
} else {
this.selectedRows = val
}
}
}
}
</script>
```
相关推荐
![](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)