element ui el-table中多选
时间: 2023-09-08 20:17:24 浏览: 63
在 Element UI 的 el-table 中实现多选功能,你可以使用 table 组件的 selection 属性来实现。下面是一个示例代码:
```vue
<template>
<el-table
:data="tableData"
:selection="selection"
@selection-change="handleSelectionChange">
<el-table-column
type="selection"
width="55">
</el-table-column>
<el-table-column
prop="name"
label="Name">
</el-table-column>
<el-table-column
prop="age"
label="Age">
</el-table-column>
<el-table-column
prop="address"
label="Address">
</el-table-column>
</el-table>
</template>
<script>
export default {
data() {
return {
tableData: [
{ name: 'John', age: 20, address: '1234 Street' },
{ name: 'Jane', age: 25, address: '5678 Street' },
{ name: 'Tom', age: 30, address: '9876 Street' },
{ name: 'Alice', age: 35, address: '5432 Street' }
],
selection: []
};
},
methods: {
handleSelectionChange(selection) {
this.selection = selection;
}
}
};
</script>
```
在上述代码中,我们通过添加一个类型为 "selection" 的 el-table-column 来显示多选框列。然后,我们使用 selection 属性绑定一个空数组,并通过 @selection-change 监听选择变化事件,在方法中更新 selection 数组的值。
这样,你就可以在 el-table 中实现多选功能了。当用户选择或取消选择行时,selection 数组会随之更新。你可以根据需要进一步处理选择的数据。