el-table复选框设置单选
时间: 2024-05-31 21:05:28 浏览: 163
复选框 实现 单选 全选
在 Element UI 中,可以通过 `type="selection"` 将一个列设置为复选框列,用于选择表格中的多个行。如果你想要设置单选,则可以通过以下步骤实现:
1. 将 `type="selection"` 的列去掉。
2. 在表格的 `data` 中添加一个属性,用于记录选中的行的 `id` 或其他唯一标识。
3. 在表格的 `row-click` 事件中,将当前行的 `id` 或其他唯一标识记录到 `data` 中,并取消其他行的选中状态。
4. 在表格的 `row-style` 中根据当前行的 `id` 或其他唯一标识判断是否选中,并设置选中状态的样式。
下面是一个示例代码:
```html
<template>
<el-table :data="tableData" row-key="id" @row-click="handleRowClick" :row-style="rowStyle">
<el-table-column prop="name" label="姓名"></el-table-column>
<el-table-column prop="age" label="年龄"></el-table-column>
</el-table>
</template>
<script>
export default {
data() {
return {
tableData: [
{ id: 1, name: '张三', age: 18 },
{ id: 2, name: '李四', age: 20 },
{ id: 3, name: '王五', age: 22 }
],
selectedId: null
};
},
methods: {
handleRowClick(row) {
this.selectedId = row.id;
},
rowStyle({ row }) {
return {
background: this.selectedId === row.id ? '#eef1f6' : ''
};
}
}
};
</script>
```
在上面的代码中,我们通过 `handleRowClick` 方法记录当前选中的行,并在 `rowStyle` 中根据 `selectedId` 的值来设置选中状态的样式。注意,这里的 `rowStyle` 方法需要返回一个对象,对象中的 `row` 属性是当前行的数据。
阅读全文