el-tree根据不同数据动态设置defaultProps
时间: 2023-10-10 07:11:06 浏览: 143
如果您需要根据不同的数据动态设置 el-tree 的 default props,您可以通过监听 el-tree 的 before-current-change 事件,在事件回调中动态设置 default props。
具体实现步骤如下:
1. 在 el-tree 组件中,通过 :props 属性绑定 default props,如下所示:
```html
<el-tree
:data="treeData"
:props="treeProps"
@before-current-change="handleBeforeCurrentChange"
></el-tree>
```
2. 在 data 中定义 treeProps 对象,并设置默认值,如下所示:
```js
data() {
return {
treeData: [
{
id: 1,
name: 'Node 1',
children: [
{
id: 2,
name: 'Node 1-1',
children: [
{
id: 3,
name: 'Node 1-1-1'
}
]
}
]
}
],
treeProps: {
children: 'children',
label: 'name'
}
};
}
```
3. 在 before-current-change 事件回调中,动态设置 treeProps 对象,如下所示:
```js
methods: {
handleBeforeCurrentChange(node, oldNode) {
// 根据需要动态设置 treeProps 对象
if (node.id === 2) {
this.treeProps = {
children: 'child',
label: 'title'
};
} else {
this.treeProps = {
children: 'children',
label: 'name'
};
}
}
}
```
在上述实现中,我们在 before-current-change 事件回调中,根据需要动态设置 treeProps 对象,从而实现了根据不同数据动态设置 default props 的需求。