el-table 表格实现单选
时间: 2023-10-14 10:21:22 浏览: 58
el-table 表格实现单选可以通过以下步骤完成:
1. 在 el-table 中添加 type="selection" 属性,表示启用多选功能。
2. 设置 el-table 的 v-model 属性为一个数组,用于存储选中的行数据。
3. 在 el-table-column 中添加 type="selection" 属性,表示启用列选择器。
4. 设置 el-table-column 的 selectable 属性为一个函数,用于判断当前行是否可选。该函数接受一个参数 row,表示当前行的数据。如果该函数返回 false,则该行不可选。
5. 设置 el-table 的 @row-click 事件,当用户点击行时,判断当前行是否可选,如果可选,则将该行数据设置为选中状态。
下面是一个示例代码:
```html
<template>
<el-table :data="tableData" v-model="selectedRows" type="selection" @row-click="handleRowClick">
<el-table-column type="selection" />
<el-table-column prop="name" label="姓名" />
<el-table-column prop="age" label="年龄" />
<el-table-column prop="address" label="地址" :selectable="selectable" />
</el-table>
</template>
<script>
export default {
data() {
return {
tableData: [
{ name: '张三', age: 20, address: '北京市朝阳区' },
{ name: '李四', age: 25, address: '上海市浦东新区' },
{ name: '王五', age: 30, address: '广州市天河区' },
],
selectedRows: [],
}
},
methods: {
selectable(row) {
// 判断当前行是否可选
return row.age < 30
},
handleRowClick(row) {
// 当用户点击行时,判断当前行是否可选,如果可选,则将该行数据设置为选中状态
if (this.selectable(row)) {
this.selectedRows = [row]
}
},
},
}
</script>
```