Shulou(Shulou.com)06/03 Report--

This article mainly shows you "vue how to achieve tree structure add, delete, change and search", the content is easy to understand, clear, hope to help you solve your doubts, the following let the editor lead you to study and learn "vue how to achieve tree structure addition, deletion, change and query" this article.

When there is no click to edit, the requirement of the product is to select a node and get the device data corresponding to that node, so the initial page looks like this.

This is the edit button that displays the node after clicking the edit button.

Click the top add button to display the add screen of the outermost parent node

Modify node name

Because our requirements are both editing and non-editing, I use two tree components that are controlled by v-if. (v-if: this component does not exist, v-show: the component takes up space, but it is not displayed)

I will not repeat the field description of the tree component, which can be viewed on the official website of the tree component of element-ui, but I will explain the following methods separately

Render-content: customize the node content, and renderContent: is the method name.

@ node-click: called when the node clicks, because the node click effect exists only in the non-edited state, so I only write this method in the non-edited tree component.

Required data description

/ / data required for tree structure treeSetData: {defaultExpandAll:true, / / whether to expand editFlg:true by default, / / whether to edit status treeData: [], / tree component dataset / / edit tree array content editList: [], / delete tree data array content deleteList: [], / / add tree data array content addList: [] / / whether to add flg addNodeFlg:false, / / default id defaultId:5000, / / newly added outermost node name newName:'', tree_key: 0,}

Explain how to add the outermost node, in fact, the main idea is to control whether the input box and button below are displayed or not, and then click the confirm button to add a piece of data to the original tree component data.

Realization screen

Add the html code for the button

Add

Add button click method [add_new_Area]

Add_new_Area () {this.treeSetData.addNodeFlg = true;}

Code snippet of a text box

Confirm to cancel

Confirm button [add_area_sure]

Add_area_sure () {/ / add node data, because it is the top layer, so if the default parent ID is pid,id, it is the self-addition of [defaultId] that I initialized. You can add the [defaultId] field to data by adding const nodeObj = {id: this.treeSetData.defaultId++, name: this.treeSetData.newName, isEdit: false, children: [], pid:0}; this.treeSetData.treeData.push (nodeObj). This.treeSetData.addNodeFlg = false; this.treeSetData.addList.push (nodeObj);}

Cancel button [add_area_cancel]

Add_area_cancel () {this.treeSetData.addNodeFlg = false; this.treeSetData.newName = "";}

At this point, you can add the outermost node.

If there are several additions, deletions and changes in the editing state, it is actually realized through the method of customizing the [renderContent] of the node content. I won't explain them one by one when I get off work. I'll make up for them when I have time. Bring up the main code first.

/ / Traffic area tree operation group node, renderContent (h, {node, data, store}) {if (this.treeSetData.editFlg = = false) {return ({this.showOrEdit (data)} this.nodeEdit (ev, store, data)} > this.nodeAdd (node) Data)} > this.nodeDelete (node, data)} >) } else {return ({this.showOrEdit (data)}) }}, / / Node editing showOrEdit (data) {if (data.isEdit) {return (this.edit_sure (ev, data)} size= "mini" class= "input-style" >);} else {return {data.name} }, nodeEdit (ev, store, data) {data.isEdit = true; this.$nextTick (() = > {const $input = ev.target [XSS _ clean] [xss_clean] .querySelector ("input") | | ev.target.parentElement.parentElement.querySelector ("input");! $input? "": $input.focus ();}) }, / / confirm editing edit_sure (ev, data) {const $input = ev.target [XSS _ clean] [xss_clean] .querySelector ("input") | | ev.target.parentElement.parentElement.querySelector ("input"); if (! $input) {return false;} else {data.name = $input.value; data.isEdit = false } / / modify the contents of editing tree data let editFilter = this.treeSetData.editList.filter ((item) = > item.id = = data.id); if (editFilter.length = = 0) {this.treeSetData.editList.push (data) } else {this.treeSetData.editList.forEach ((item,i) = > {if (item.id = = data.id) {this.treeSetData.editList [I] .name = data.name }})}}, / / add nodes nodeAdd (node, data) {if (data.pid! = = 0) {this.$message ({type:'error',message:' traffic area can only have two levels of hierarchy at most.' }); return false;} else {const newChild = {id: this.treeSetData.defaultId++, name: 'new traffic area', isEdit:false, pid:data.id, children: []}; if (! data.children) {this.$set (data, 'children', []);} data.children.push (newChild) This.treeSetData.addList.push (newChild);}}, / / Delete nodeDelete (node, data) {this.treeSetData.deleteList.push (data); const parent = node.parent; const children = parent.data.children | | parent.data; const index = children.findIndex (d = > d.id = data.id); children.splice (index, 1);}

Then submit the data processed above (data to be added: addList, data to be modified: editList, data to be deleted: deleteList) to the background for database processing as a whole, but you need to pay attention to the following situations.

/ / data consolidation this.treeSetData.addList.forEach ((item,i) = > {let editFilter = this.treeSetData.editList.filter ((value) = > value.id = = item.id); if (editFilter.length! = = 0) {this.treeSetData.addList [I] = editFilter [0]; this.treeSetData.editList = this.treeSetData.editList.filter ((value) = > value.id! = = item.id) }}) / / data consolidation this.treeSetData.deleteList.forEach ((item,i) = > {let addFilter = this.treeSetData.addList.filter ((value) = > value.id = item.id); if (addFilter.length! = = 0) {this.treeSetData.deleteList = this.treeSetData.deleteList.filter ((value) = > value.id! = = item.id) This.treeSetData.addList = this.treeSetData.addList.filter ((value) = > value.id! = = item.id);}}) / / data consolidation this.treeSetData.deleteList.forEach ((item,i) = > {let editFilter = this.treeSetData.editList.filter ((value) = > value.id = = item.id) edited first and then deleted) If (editFilter.length! = = 0) {this.treeSetData.editList = this.treeSetData.editList.filter ((value) = > value.id! = = item.id);})

Tree component styl

.el-message-box {width: 450px;}. Button-style {padding: 0px}. Input-style {height: 15pxash width: 140px;} .through-panel-body {padding-top:12px; width: 100%; display:flex; .panel-area-left {position: relative; width: 360px; border:2px solid rgba (240Magol 240); border-radius: 5px; .head-title {display:flex;justify-content: space-between;padding:10px 10px H6 {border-left:solid 3px # FB8742;padding-left:5px;height: 20pxscape lineweight 0px 0px 10px 20pxx;}} .area-tree {width: 100%; .tree-style {margin: 0px 0px 10px 10px; height:88%; overflow-y: auto El-tree-node__content {padding-left: 10pxscape display: flex;width: 100%; .tree-span {display: flex;width: 100%; .tree _ node_op {margin-left: 10pxscape color: # D3D3D3 }} .add _ question {margin: 10px 0px;} .foot-style {padding-right:5px; height: 40px; text-align: right;}} .panel-area-right {margin-right: 5px; width: 100%; padding-left: 15px; height: 100% .el-row {width: 100%; display: flex; justify-content: space-between;. Located-class {width: 50%;} .device-floor-class {width: 50%; display: flex; justify-content: flex-end The above is all the contents of the article "how to add, delete, modify and query the tree structure of vue". Thank you for reading! I believe we all have a certain understanding, hope to share the content to help you, if you want to learn more knowledge, welcome to follow the industry information channel!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.