el-table选择框单选
时间: 2024-05-09 08:12:00 浏览: 10
el-table是Element UI中的一个表格组件,可以用于展示数据。要实现el-table选择框的单选功能,可以通过以下步骤进行操作:
1. 首先,在el-table的列定义中添加一个选择框列。可以使用el-table-column组件,并设置type属性为"selection",如下所示:
```html
<el-table :data="tableData">
<el-table-column type="selection"></el-table-column>
<!-- 其他列定义 -->
</el-table>
```
2. 接下来,在data中定义一个变量来存储选中的行数据。可以使用v-model指令将选中的行数据绑定到该变量上,如下所示:
```html
<el-table :data="tableData" v-model="selectedRows">
<el-table-column type="selection"></el-table-column>
<!-- 其他列定义 -->
</el-table>
<script>
export default {
data() {
return {
tableData: [], // 表格数据
selectedRows: [] // 存储选中的行数据
};
}
};
</script>
```
3. 最后,可以通过监听selection-change事件来获取选中的行数据。在事件处理函数中,将选中的行数据赋值给selectedRows变量,如下所示:
```html
<el-table :data="tableData" v-model="selectedRows" @selection-change="handleSelectionChange">
<el-table-column type="selection"></el-table-column>
<!-- 其他列定义 -->
</el-table>
<script>
export default {
data() {
return {
tableData: [], // 表格数据
selectedRows: [] // 存储选中的行数据
};
},
methods: {
handleSelectionChange(selection) {
this.selectedRows = selection;
}
}
};
</script>
```
这样,当用户在el-table中选择行时,selectedRows变量会自动更新为选中的行数据。你可以根据需要对selectedRows进行进一步处理。