el-table 单选框
时间: 2024-08-15 07:01:39 浏览: 62
`el-table`是Element UI库中的一个表格组件,它允许开发者在表格中展示和操作数据。当你想要在`el-table`中实现单选框的功能时,可以通过`type="radio"`属性来为表格的某一行添加单选框。你可以通过`v-model`绑定一个数组到表格的`row-radio-name`属性,这样就可以追踪到用户选中的行数据。
具体实现步骤如下:
1. 在`el-table`标签中使用`type="radio"`定义单选框,并用`row-radio-name`属性指定一个名称用于追踪选中的行。
2. 使用`v-model`绑定一个数组到`row-radio-name`,这个数组会存储当前选中行的数据。
3. 在表格的`<el-table-column>`中使用`type="radio"`,并确保每行的`row-radio-name`值相同,这样就可以实现整行的单选功能。
示例代码如下:
```html
<template>
<el-table
:data="tableData"
style="width: 100%">
<el-table-column type="radio" 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: '2016-05-02',
name: '王小虎',
address: '上海市普陀区金沙江路 1518 弄'
}, {
date: '2016-05-04',
name: '张小刚',
address: '上海市普陀区金沙江路 1517 弄'
}]
};
}
}
</script>
```
阅读全文