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