vue实现树形结构增删改查代码示例

作者:袖梨 2022-06-29

本篇文章小编给大家分享一下vue实现树形结构增删改查代码示例,文章代码介绍的很详细,小编觉得挺不错的,现在分享给大家供大家参考,有需要的小伙伴们可以来看看。

效果图

这个是没有点击编辑时,产品的需求是选中某个节点,取得该节点对应的设备数据,所以初始页面是下面这个样子的。

这个是点击了编辑之后,显示节点的编辑按钮

点击最上面的添加按钮,显示最外层父节点的添加画面

修改节点名称

因为我们的需求是编辑与非编辑两种状态,所以我用了两个树形组件,通过v-if进行控制。(v-if:该组件不存在,v-show:组件占用空间,只是不展示)


 

树形组件的字段说明我就不一一赘述了,可以通过element-ui的树形组件官网查看,但是我要单独说明一下以下方法,

render-content:自定义节点内容,renderContent:为方法名。

@node-click:节点点击时调用,因为只有在非编辑状态下才存在节点点击效果,因此该方法我只写在了非编辑的树形组件内

所需data说明

// 树形结构所需数据  
treeSetData:{
  defaultExpandAll:true, // 是否默认展开
  editFlg:true, // 是否是编辑状态
  treeData: [], // 树形组件数据集
  // 编辑树形数组内容
  editList:[],
  // 删除树形数据数组内容
  deleteList:[],
  // 添加树形数据数组内容
  addList:[],
  // 是否添加flg
  addNodeFlg:false,
  // 默认的id
  defaultId:5000,
  // 新增的最外层节点名称
  newName:'',
  tree_key: 0,
},

说明一下最外层节点的添加方法,其实主要的核心思想是控制下方的输入框以及按钮的展示与否,然后点击确认按钮之后,在原有的树形组件data里新增一条数据。

实现画面

添加按钮的html代码

添加

添加按钮点击方法【add_new_Area】

add_new_Area() {
      this.treeSetData.addNodeFlg = true;
    },

文本框的代码片段


    
         
     
     
         确定
         取消
     
 

确认按钮【add_area_sure】

add_area_sure() {
// 添加节点数据,因为是最上层,所以默认父ID是pid,id的话是我初始化设置的【defaultId】的自加,大家自己在data中加一下【defaultId】字段就可以了
  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);
},

取消按钮【add_area_cancel】

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

至此就可以实现最外层节点的添加了。

编辑状态下的几点增删改的话,其实就是通过自定义节点内容的【renderContent】这个方法实现的,快下班了我就不一一说明了,有时间再补吧,先把主要代码提出来~

// 通行区域树操作group node,
    renderContent(h, { node, data, store }) {
        if(this.treeSetData.editFlg == false){
            return (
                
                    {this.showOrEdit(data)}
                    
this.nodeEdit(ev, store, data)} style="padding-left: 10px;"> this.nodeAdd(node, data)} style="margin-left: 5px;"> this.nodeDelete(node, data)} style="margin-left: 5px;">
); } else { return ( {this.showOrEdit(data)}
); } }, // 节点编辑 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.parentNode.parentNode.querySelector("input") || ev.target.parentElement.parentElement.querySelector("input"); !$input ? "" : $input.focus(); }); }, // 确认编辑 edit_sure(ev, data) { const $input = ev.target.parentNode.parentNode.querySelector("input") || ev.target.parentElement.parentElement.querySelector("input"); if (!$input) { return false; } else { data.name = $input.value; data.isEdit = false; } // 修改编辑树形数据的内容 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; } }) } }, // 增加节点 nodeAdd(node, data) { if (data.pid !== 0){ this.$message({type:'error',message:'通行区域最多只能有两级层次结构。'}); return false; } else { const newChild = { id: this.treeSetData.defaultId++, name: '新增的通行区域', isEdit:false, pid:data.id, children: [] }; if (!data.children) { this.$set(data, 'children', []); } data.children.push(newChild); this.treeSetData.addList.push(newChild); } }, // 节点删除 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); },

然后将上面处理完的数据(要增加的数据:addList,要修改的数据:editList,要删除的数据:deleteList)整体提交给后台去做数据库处理就可以了,但是需要注意一下以下的几种情况。

// 先添加,后修改的数据整合
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);
    }
})
// 先添加,后删除的数据整合
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);
    }
})
// 先编辑,后删除的数据整合
this.treeSetData.deleteList.forEach((item,i)=>{
    let editFilter = this.treeSetData.editList.filter((value)=>value.id == item.id);
    if(editFilter.length !== 0){
        this.treeSetData.editList = this.treeSetData.editList.filter((value)=>value.id !== item.id);
    }
})

树形组件样式

css;">

相关文章

精彩推荐