elementui table 添加单选按钮
时间: 2023-10-08 18:12:59 浏览: 83
要在ElementUI表格中添加单选按钮,可以使用el-radio组件和scoped slot来实现。
首先,在表格中添加一列,用于显示单选按钮。可以使用scoped slot来自定义列的内容,例如:
```html
<el-table-column label="选择">
<template slot-scope="scope">
<el-radio v-model="selected" :label="scope.row.id"></el-radio>
</template>
</el-table-column>
```
其中,`selected`是在Vue实例中定义的数据,用于存储选中行的id。
然后,在表格的data属性中添加一个属性用于存储选中行的id,例如:
```js
data() {
return {
selected: ''
// ...
}
}
```
最后,在表格的selection-change事件中更新选中行的id,例如:
```html
<el-table @selection-change="handleSelectionChange" ...>
...
</el-table>
```
```js
methods: {
handleSelectionChange(selection) {
if (selection.length > 0) {
this.selected = selection[0].id;
} else {
this.selected = '';
}
}
// ...
}
```
这样,在表格中就可以通过单选按钮来选择行,并且可以在Vue实例中获取到选中行的id。
阅读全文