使用element-ui中的tree树进行添加修改功能
功能要求：
1.可新建tree树根节点
2.可新建tree树子节点
3.可对修改节点内容
4.可移动节点（选用）
5.控制最大生成层数
功能实现图
... 1.可新建tree树根节点
element-ui tree组件自带新增节点，但是没有新增根节点功能，需要自行添加此功能
首先需要新建一个i标签或者button按钮，建立点击事件，绑定添加函数
<i class="el-icon-document-add" @click="add_new_question(data)"></i>
添加函数
add_new_question(data) { const newChild = { id: id++, label: "test", children: [], showInput: false, parId: -1, layer: 1 }; if (!data) { this.$set(data, "children", []); } data.push(newChild); }
其中newChild中的参数由其自己的数组进行修改
let id = 1000; let auid = 1; let MAX_layer = 4; //设置可创建的最大层数，数量-1，如此为最大层数为3层 const data = [ { layer: 1, id: 1, label: "一级 1", showInput: false, parId: -1, children: [ { layer: 2, id: 4, label: "二级 1-1", showInput: false, parId: 1, children: [ { layer: 3, id: 9, label: "三级 1-1-1", showInput: false, parId: 4 }, { layer: 3, id: 10, label: "三级 1-1-2", showInput: false, parId: 4 } ] } ] } ]; return { data: JSON.parse(JSON.stringify(data)), add_question_flag: false, new_question_name: "", updataoption:true, optionshow:'', dynamicdata: [ { autoid: 0, dyoption: [{ id: 0 }] } ] };
2.可新建tree树子节点
子节点为tree自带，不写
3.可对修改节点内容
修改内容功能具体实现步骤为：
1.点击修改，节点由span变input，input中显示的内容为原节点内容，并获得焦点全选
2.修改后，失去焦点，由input变回span,节点内容修改
1.变换较简单，
之前的数据中有每个节点都有一个属性showInput,由这个控制显示
<span class="custom-tree-node" slot-scope="{ node, data }"> <span v-if="!data.showInput">{{ node.label }}</span> <el-input size="mini" ref="inputVal" v-if="data.showInput" :value="data.label" @focus="focus($event)" @blur="() => alters(node, data)" @input="a => inp(a, data)" ></el-input> <span>
注意，如果data数据如我所建造，input中不可用v-model,因为，数据为只读，双向绑定不能修改
2获得焦点事件
focus(event) { event.currentTarget.select(); },
3.修改功能由input进行控制
inp(value, data) { data.label = value; },
4.失去焦点后
alters(node, data) { data.showInput = !data.showInput; // this.focus(event) // this.$nextTick(function() { // //DOM 更新了 // this.$refs.inputVal.focus(); // }); },
5。修改所对应事件
<span> <el-button type="text" size="mini" @click="() => append(data)"> 新增子项目 </el-button> <el-button type="text" size="mini" @click="() => remove(node, data)" > 删除 </el-button> <el-button size="mini" type="text" @click="() => alter(node, data)" > 修改 </el-button> </span>
alter(node, data) { data.showInput = !data.showInput; // this.focus(event) this.$nextTick(function() { //DOM 更新了 this.$refs.inputVal.focus(); }); },
注，命名相近，注意，
4.可移动节点（选用）
自带功能，不写
5.控制最大生成层数
写思路，功能代码在上面内容中
1设置最大层数max_layer
2.建立的data数据中每一项都带一个layer属性，第一层设为1，以此类推，添加函数中在加一层判断，看要是新增加的newchild中的layer为多少，即可控制
append(data) { const newChild = { id: id++, label: "test", children: [], showInput: false, parId: data.id, layer: data.layer + 1 }; if (newChild.layer < MAX_layer) { if (!data.children) { this.$set(data, "children", []); } data.children.push(newChild); } else { alert("已达可创建最大层数"); } },
注，新增根节点与此类似，但代码有所不同，需认真，不可节点认为为相同代码
结束，告辞
