el-table表格单选
时间: 2023-11-11 15:56:20 浏览: 61
el-table表格单选可以通过以下步骤实现:
1. 隐藏全选框:
使用CSS选择器找到表头中的复选框元素,并将其样式的display属性设置为none,即可隐藏全选框。
2. 实现单选:
在el-table-column中设置type属性为"selection",这将自动为每一行添加一个复选框。然后,使用@select事件和@selection-change事件来处理单选逻辑。
具体实现代码如下:
```html
<template>
<el-table :data="tableData" @select="handleSelect" @selection-change="handleSelectionChange">
<el-table-column type="selection" width="35"></el-table-column>
<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: [
{ name: '张三', age: 20 },
{ name: '李四', age: 25 },
{ name: '王五', age: 30 }
],
selectedRow: null
}
},
methods: {
handleSelect(selection, row) {
if (row) {
this.selectedRow = row
} else {
this.selectedRow = null
}
},
handleSelectionChange(selection) {
if (selection.length === 0) {
this.selectedRow = null
} else {
this.selectedRow = selection[0]
}
}
}
}
</script>
```