element plus expand-row-keys 如何使用
时间: 2023-08-16 07:08:40 浏览: 73
`expand-row-keys` 属性需要绑定一个数组,数组中存储的是每一行的唯一标识符。通常情况下,这个标识符是每一行的数据中的某个唯一字段,比如 `id`。
下面是一个示例代码,展示了如何使用 `expand-row-keys` 属性:
```html
<template>
<el-table
:data="tableData"
:row-key="row => row.id"
:expand-row-keys="expandedKeys"
@expand-change="handleExpandChange"
>
<el-table-column prop="name" label="姓名"></el-table-column>
<el-table-column prop="age" label="年龄"></el-table-column>
<el-table-column prop="gender" label="性别"></el-table-column>
</el-table>
</template>
<script>
export default {
data() {
return {
tableData: [
{ id: 1, name: '张三', age: 20, gender: '男' },
{ id: 2, name: '李四', age: 22, gender: '女' },
{ id: 3, name: '王五', age: 24, gender: '男' },
],
expandedKeys: [], // 存储展开行的标识符
};
},
methods: {
handleExpandChange(row, expanded) {
if (expanded) {
this.expandedKeys.push(row.id);
} else {
const index = this.expandedKeys.indexOf(row.id);
this.expandedKeys.splice(index, 1);
}
},
},
};
</script>
```
在这个示例代码中,我们首先给表格绑定了一个 `row-key` 属性,指定了每一行的唯一标识符为 `id`。然后,在 `el-table` 组件上绑定了 `expand-row-keys` 属性,指定了展开行的标识符数组为 `expandedKeys`。
当我们点击某一行的展开按钮时,`@expand-change` 事件会被触发,同时会传入两个参数:当前被点击的行数据 `row` 和该行是否展开 `expanded`。我们可以通过判断 `expanded` 的值来决定是将该行的标识符添加到 `expandedKeys` 数组中,还是将其从数组中移除。最终,我们就可以通过 `expandedKeys` 数组来控制哪些行应该展开。