在vue中,el-tree进行调接口的增删改操作代码实现
时间: 2024-03-23 20:37:48 浏览: 68
Element-ui树形控件el-tree自定义增删改和局部刷新及懒加载操作
5星 · 资源好评率100%
对于el-tree进行调接口的增删改操作,可以通过以下步骤实现:
1. 在vue组件中引入axios库用于发送http请求。
```
import axios from 'axios'
```
2. 在vue组件中定义treeData变量,并从后端接口获取初始化树形结构数据。
```
data() {
return {
treeData: []
}
},
mounted() {
this.fetchTreeData()
},
methods: {
fetchTreeData() {
axios.get('/api/getTreeData').then(res => {
this.treeData = res.data
})
}
}
```
3. 在el-tree组件中设置props属性,将treeData作为数据源传入。
```
<el-tree
:data="treeData"
...
>
```
4. 在vue组件中定义增删改操作的方法,并在el-tree组件中绑定对应的事件。
```
methods: {
addNode(data, node, vnode) {
axios.post('/api/addNode', { parentId: node.id, name: 'new node' }).then(res => {
if (res.data.success) {
node.children.push(res.data.data)
}
})
},
updateNode(data, node, vnode) {
axios.put('/api/updateNode', { id: node.id, name: 'new name' }).then(res => {
if (res.data.success) {
node.label = res.data.data.name
}
})
},
deleteNode(data, node, vnode) {
axios.delete('/api/deleteNode', { params: { id: node.id } }).then(res => {
if (res.data.success) {
node.parent.children.splice(node.parent.children.indexOf(node), 1)
}
})
}
}
```
5. 在el-tree组件中绑定增删改操作事件。
```
<el-tree
...
@node-append="addNode"
@node-update="updateNode"
@node-remove="deleteNode"
>
```
以上是el-tree进行调接口的增删改操作的代码实现。需要根据具体的业务场景进行调整和优化。
阅读全文