elementui table 添加单选按钮
时间: 2023-10-09 09:07:51 浏览: 56
要在 ElementUI 的表格中添加单选按钮,你可以使用 el-radio 组件作为表格中的一个列,并在点击行时更新选中的数据。以下是一个简单的示例:
```html
<template>
<div>
<el-table :data="tableData" @row-click="handleRowClick">
<el-table-column type="selection" width="55"></el-table-column>
<el-table-column label="姓名" prop="name"></el-table-column>
<el-table-column label="年龄" prop="age"></el-table-column>
<el-table-column label="性别">
<template slot-scope="scope">
<el-radio v-model="selected" :label="scope.row.gender"></el-radio>
</template>
</el-table-column>
</el-table>
</div>
</template>
<script>
export default {
data() {
return {
tableData: [
{ name: '张三', age: 20, gender: '男' },
{ name: '李四', age: 25, gender: '女' },
{ name: '王五', age: 30, gender: '男' },
],
selected: '',
};
},
methods: {
handleRowClick(row) {
this.selected = row.gender;
},
},
};
</script>
```
在这个示例中,我们在表格中添加了一个名为“性别”的列,并使用 el-radio 组件显示每一行的性别。在点击行时,我们使用 handleRowClick 方法来更新选中的性别。
需要注意的是,我们还必须将 type 属性设置为“selection”以启用表格的选择功能。
相关推荐
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.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)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![vue](https://img-home.csdnimg.cn/images/20210720083646.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![7z](https://img-home.csdnimg.cn/images/20210720083312.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)