This is the 9th day of my participation in Gwen Challenge

There was a requirement in the project to change the el-Tree component of Element-UI to something like this:

Analysis of the

Most of these functions can be implemented using elder-UI’s El-Tree component. The only thing is that you need to implement new, modified, and deleted functions yourself, and then call the methods provided by El-Tree to implement them. It’s basically how to add a new one, edit.

structure

The structure definition is very simple, here is the code directly:

<el-button-group> <el-button type="primary" icon="el-icon-minus" @click="delCategory"></el-button> <el-button type="primary" icon="el-icon-plus" @click="addCategory"></el-button> <el-button type="primary" icon="el-icon-edit" @click="editCategory"></el-button> </el-button-group> <el-tree ref="tree" node-key="id" empty-text=" draggable highlight-current :expand-on-click-node="false" @node-click="handleNodeClick" :data="dataTree" :props="{label:'name'}"> <span class="custom-tree-node" slot-scope="{ node, data }"> <span v-if="! data.isInput">{{node.label}}{{node.data.label}}</span> <span v-else><el-input v-model="currentInput" Placeholder =" @blur="saveCurrentInp"></el-input></span> </span> </span> </el-tree>Copy the code

The above code is used to customize the name of the display category, here one is the existing display, one is for the new display, by defining a parameter in the data to control whether to display the input box.

The new item

Adding new items is fine, but there is a special treatment that needs to be done before adding new items, that is, the current click item needs to be saved. The code is as follows:

HandleNodeClick (data,node){this.currentData = data this.currentNode = node if(data.id ! = 1){this.tmpcurrent = data}}Copy the code

There is one place that needs to be noted here, which is the cache of classified data. The default ID of the newly added item is set to -1. The cache is also for the purpose of adding or modifying the input box to lose focus and point to other items, resulting in errors

And then there’s the addition, which is still pretty much the same as in the documentation. The code is as follows:

AddCategory (){const newChild = {id:-1,label: ",leaf: true,isInput:true} if (! this.currentData.children) { this.$set(this.currentData, 'children', []) } this.currentData.children.push(newChild) }Copy the code

The default id of the new item is -1, and there is no lower level, and the input value is true, so that the new item can be seen as an input box, the input box has, after input text needs to save, pseudo-code is as follows:

SaveCurrentInp (){if(this.currentinput){var params = {name: this.currentinput} saveCurrentInp(){var params = {name: this.currentinput} If (this.tmpcurrent-isedit){params.id = this.tmpcurrent-id}else{params.parentid = this.tmpcurrent-id} After success, the classification information is returned, so that the newly added classification data can be updated, Remember save interface can add here oh var newChild = {id: res. Result. Id, label: res. Result. The name, the children: [], isInput: false} this.$set(this.currentNode,'data',newChild) this.$refs.tree.updateKeyChildren(this.currentData.isEdit?this.tmpCurrent.id:-1,newChild) }else{ This.$message.error(' Please enter category name ')}}Copy the code

The name of the category can be seen by changing the input state to false. Note that the parameters required for new and modified categories are different

That’s it. Let’s edit it

Edit item

When the edit button is clicked, the input in the current data is set to true, whether the edit state is also set to true. The code is as follows:

// editCategory editCategory(){if(this.currentdata.id){this.currentinput = this.currentdata.name $set(this.currentData,'isEdit',true) $set(this.currentData,'isEdit',true) else{this.currentData,'isEdit',true) else{this.currentData,'isEdit',true)}Copy the code

Note that when updating data, use $set update to make the page effective. If you don’t know, please check the official documentation of vue

I’m going to save that so that’s what I added up here.

Delete the item

Delete the most simple, there is nothing to say, directly look at the code:

$this.$confirm(' +this.currentData.name+'); ', 'system prompt ', {confirmButtonText:' confirm ', cancelButtonText: 'cancel ', type: 'warning'}).then(() => {// Call the interface to delete the category. Update the data can be const parent = this. CurrentNode. Parent const children = parent. Data. Children | | the parent. The data const index = children.findIndex(d => d.id === this.currentData.id) children.splice(index, 1) }).catch(() => {}) }Copy the code

conclusion

It’s not that hard, but it’s easy to create the look you want after you understand the official Element-UI example. We have a better method welcome to add oh!