elementui表格单选
时间: 2023-11-01 15:00:41 浏览: 47
使用ElementUI实现表格的单选功能,可以通过给表格的每一行添加一个checkbox,并通过设置v-model绑定每一行的选中状态。在row-click事件中,判断点击的列是否是选择列,如果是选择列,则直接返回,否则执行业务处理代码。
代码示例如下:
<<引用>>
```html
<el-table :data="tableDatas" border size="small" @row-click="detail" v-loading="states.isLoading" element-loading-text="努力加载中..." style="width: 100%;height:62vh;">
<el-table-column width="55" align="center" prop="checked" label="选择">
<template slot-scope="scope">
<el-checkbox v-model="scope.row.checked" @change="changeCurrentRow($event, scope.$index, scope.row)"></el-checkbox>
</template>
</el-table-column>
</el-table>
```
```javascript
methods: {
detail(row, column) {
if (column.property === 'checked') {
return;
}
// 行事件 业务处理代码
},
changeCurrentRow(event, index, row) {
// 处理选中状态变化
}
}
```