eltable单选按钮
时间: 2023-09-13 19:05:07 浏览: 95
el-table中可以通过el-radio或者el-radio-group来实现单选按钮的功能。
1. 使用el-radio实现单选按钮:
```html
<template>
<el-table :data="tableData" style="width: 100%">
<el-table-column prop="name" label="姓名"></el-table-column>
<el-table-column prop="gender" label="性别">
<template slot-scope="scope">
<el-radio v-model="scope.row.gender" label="male">男</el-radio>
<el-radio v-model="scope.row.gender" label="female">女</el-radio>
</template>
</el-table-column>
</el-table>
</template>
<script>
export default {
data() {
return {
tableData: [
{ name: '张三', gender: 'male' },
{ name: '李四', gender: 'female' },
{ name: '王五', gender: 'male' },
],
};
},
};
</script>
```
2. 使用el-radio-group实现单选按钮:
```html
<template>
<el-table :data="tableData" style="width: 100%">
<el-table-column prop="name" label="姓名"></el-table-column>
<el-table-column prop="gender" label="性别">
<template slot-scope="scope">
<el-radio-group v-model="scope.row.gender">
<el-radio label="male">男</el-radio>
<el-radio label="female">女</el-radio>
</el-radio-group>
</template>
</el-table-column>
</el-table>
</template>
<script>
export default {
data() {
return {
tableData: [
{ name: '张三', gender: 'male' },
{ name: '李四', gender: 'female' },
{ name: '王五', gender: 'male' },
],
};
},
};
</script>
```
以上两种方式都可以实现el-table中的单选按钮功能,具体选择哪种方式根据实际情况选择。
阅读全文