如何向el-table-column中添加el-radio
时间: 2024-01-14 13:20:20 浏览: 133
根据提供的引用内容,可以向el-table-column中添加el-radio来实现单选效果。以下是一个示例代码:
```html
<template>
<el-table :data="tableData" style="width: 100%">
<el-table-column type="selection"></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.id"></el-radio>
</template>
</el-table-column>
</el-table>
</template>
<script>
export default {
data() {
return {
tableData: [
{ id: 1, name: '张三', age: 20 },
{ id: 2, name: '李四', age: 25 },
{ id: 3, name: '王五', age: 30 }
],
selected: null
};
}
};
</script>
```
在上述代码中,我们使用了el-table-column的type属性来实现单选效果。通过在el-table-column中使用template标签,并使用slot-scope来获取每一行的数据,然后使用el-radio来实现单选效果。v-model绑定的是selected变量,通过设置label属性为每一行的唯一标识符,来实现单选效果。
阅读全文
相关推荐

















