el-tree append方法
时间: 2023-09-04 11:15:22 浏览: 53
在 Element UI 中,el-tree 的 append 方法用于在指定节点下添加一个子节点。具体使用方法如下:
``` javascript
this.$refs.tree.append(data, parentNode);
```
其中,`data` 表示要添加的子节点数据,格式为 `{ label: '节点文本', data: { ...其他数据 } }`,`parentNode` 表示要添加到的父节点,可以使用 `$refs` 获取指定节点的引用。
示例代码:
``` html
<template>
<el-tree :data="data" ref="tree">
<span slot-scope="{ node, data }">{{ data.label }}</span>
</el-tree>
<el-button @click="addItem">添加子节点</el-button>
</template>
<script>
export default {
data() {
return {
data: [
{ label: '节点1', data: { id: 1 } },
{ label: '节点2', data: { id: 2 } },
{ label: '节点3', data: { id: 3 } }
]
}
},
methods: {
addItem() {
const parentNode = this.$refs.tree.getNode(0);
this.$refs.tree.append({ label: '子节点', data: { id: 4 }}, parentNode);
}
}
}
</script>
```
在上述示例中,点击 "添加子节点" 按钮后,将会在第一个节点下添加一个名为 "子节点" 的子节点。
相关推荐
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)