vue 树形控件可编辑_VUE饿了么树形控件添加增删改功能的示例代码

本文介绍了VUE饿了么树形控件添加增删改功能的示例代码，分享给大家，具体如下：

element-ui树形控件：地址

在原文档中有个案例是有新增和删除功能，但是后来发现其修改的数据并不能直接影响到树形数据，所以采用了 render-content 的API重新写了个组件。

写个开发的步骤，所以文章比较长emmm

大致效果如图：

1.省市API

在网上复制了个省市的list，有两个属性是新增的

isEdit ：控制编辑状态

maxexpandId ：为现下id的最大值

maxexpandId: 95,treelist: [{

id: 1,name: "北京市",ProSort: 1,remark: "直辖市",pid: '',isEdit: false,children: [{

id: 35,name: "朝阳区",pid: 1,remark: '',children: []

}]

}{...}]

}

2.el-tree Component基本

咱们一步步来，先写个饿了么的组件

同时引入API和节点渲染的组件

然后搭建好基础

添加个渲染的method

t