在使用ElementUI的表格的时候,怎么自定义事件实现多选
时间: 2023-12-10 15:38:47 浏览: 77
使用ElementUI的表格时,可以通过 `@selection-change` 事件来监听表格的多选事件。同时,我们可以通过自定义列来实现多选功能,具体实现步骤如下:
1. 在表格的列定义中添加一个 `type` 为 `'selection'` 的列,表示该列是多选列。
2. 在模板中使用 `checkbox` 组件来渲染多选列。
3. 在 `@selection-change` 事件中获取选中的行数据。
以下是一个示例代码:
```html
<template>
<el-table :data="tableData" @selection-change="handleSelectionChange">
<el-table-column type="selection"></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: 18 },
{ name: '李四', age: 20 },
{ name: '王五', age: 22 },
],
selectedRows: [], // 选中的行数据
}
},
methods: {
handleSelectionChange(selection) {
this.selectedRows = selection
},
},
}
</script>
```
在模板中,我们通过 `<el-table-column type="selection"></el-table-column>` 添加了一个多选列。同时,我们在 `@selection-change` 事件中获取选中的行数据,并将其保存到 `selectedRows` 变量中。这样,我们就可以在组件中使用 `selectedRows` 变量来获取选中的行数据了。
阅读全文