使用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("已達可建立最大層數"); } },
注，新增根節點與此類似，但程式碼有所不同，需認真，不可節點認為為相同程式碼
結束，告辭