vue 树形控件可编辑_VUE饿了么树形控件添加增删改功能

element-ui树形控件：地址

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

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

2018.07.25更新

elementUI ^2.2.0提供了一个slot的自定义节点方法，相关代码已在github更新，原理一样。

大致效果如图：

1.省市API

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

isEdit：控制编辑状态

maxexpandId：为现下id的最大值

export default{

maxexpandId: 95,

treelist: [{

id: 1,

name: "北京市",

ProSort: 1,

remark: "直辖市",

pid: '',

isEdit: false,

children: [{

id: 35,

name: "朝阳区",

pid: 1,

remark: '',

isEdit: false,

children: []

}]

}{...}]

}

2.el-tree Component基本

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

v-if="isLoadingTree"

:data="setTree"

node-key="id"

highlight-current

:props="defaultProps"

:expand-on-click-node="false"

:render-content="renderContent"

:default-expanded-keys="defaultExpandKeys">

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

import TreeRender from '@/components/tree_render'

import api from '@/resource/api'

然后搭建好基础

data(){

return{

maxexpandId: api.maxexpandId,//新增节点开始id

non_maxexpandId: api.maxexpandId,//新增节点开始id(不更改)

isLoadingTree: false,//是否加载节点树

setTree: api.treelist,//节点树数据

defaultProps: {

children: 'children',

label: