关于ant-design:antdesignvue中tree增删改

ant-design-vue中tree增删改

1. 应用背景

新我的项目中应用了ant-design-vue组件库.该组件库齐全根基数据双向绑定的模式实现.只有表单组件提供大量的办法.所以,在应用ant-design-vue时,肯定要从扭转数据的角度去切换UI显示成果.然而,在树形控件a-tree的应用上,单从数据驱动下来思考,感体验成果切实不好.

2. 以后痛点

通过浏览官网帮忙文档,针对树形控件数据绑定.须要将数据结构成一个蕴含children,title,key属性的大对象.这样一个对象,要么通过后端结构好这样的json对象,要么就是后端给前端一个json数组,前端依据上下级关系构建这么一个树形对象.数据绑定好,就能够胜利的渲染成咱们想要的UI成果了.可痛点在哪里呢?

树形加载胜利后,我要向以后的树形增加一个同级以及上级节点该如何操作(增)
树形加载胜利后,我要批改任意一个树形节点该如何操作(改)
树形加载胜利后,我要删除一个树形节点该如何操作(删)

以上操作,都要求不从新加载树形控件条件下实现.通过测试整顿出了三个可行计划

数据驱动
作用域插槽
节点事件

3. 数据驱动实现树形节点增删改

咱们能够在帮忙文档中找到名为selectedKeys(.sync)属性,sync示意该属性反对双向操作.然而,这里仅仅获取的是一个key值,并不是须要的绑定对象.所以,须要通过这key值找到这个对象.须要找这个对象就相当恶心了

如果后端返回是构建好的数据,须要遍历这个树形数据中找到和这个key值对应的对象.我能想到的就是通过顶层节点递归查找.可是控件都渲染实现了,都晓得每个节点的数据.我为什要从新查找一遍呢???
如果后端返回的仅仅是一个数组,这个方才有提到须要从新构建这部分数据为对象.这样查找这个对象又分两种状况
a. 如果列表数据和构建后树形对象采纳克隆的形式,也就是列表中对象的地址和树形中雷同key值对象的地址不同.须要通过办法1遍历从新结构后的树形数据
b. 如果列表数据中的对象和构建后对应的节点是雷同的对象地址.能够间接查找这个列表数据失去对应的对象.

所以,恶心的中央就在于构建好一个树,我又得遍历这个树查找某个节点,或者采纳计划b这种空间换工夫的做法

这里咱们假如数据,曾经是构建成树形的数据格式.要实现数据驱动的首要任务须要实现两个外围办法

依据以后节点key值查找节点对象getTreeDataByKey
依据以后节点key值查找父级节点children汇合getTreeParentChilds

两个办法代码别离如下

// author:herbert date:20201024 qq:464884492
// 依据key获取与之相等的数据对象
getTreeDataByKey(childs = [], findKey) {
   let finditem = null;
   for (let i = 0, len = childs.length; i < len; i++) {
     let item = childs[i]
     if (item.key !== findKey && item.children && item.children.length > 0) {
       finditem = this.getTreeDataByKey(item.children, findKey)
     }
     if (item.key == findKey) {
       finditem = item
     }
     if (finditem != null) {
       break
     }
   }
   return finditem
 },
// author:herbert date:20201024 qq:464884492
// 依据key获取父级节点children数组
getTreeParentChilds(childs = [], findKey) {
   let parentChilds = []
   for (let i = 0, len = childs.length; i < len; i++) {
     let item = childs[i]
     if (item.key !== findKey && item.children && item.children.length > 0) {
       parentChilds = this.getTreeParentChilds(item.children, findKey)
     }
     if (item.key == findKey) {
       parentChilds = childs
     }
     if (parentChilds.length > 0) {
       break
     }
   }
   return parentChilds
},

3.1 增加同级节点

增加同级节点,须要把新减少的数据,增加到以后选中节点的父级的children数组中.所以,增加节点的难点在如何找到以后选中节点的绑定对象的父级对象.页面代码如下

<!-- author:herbert date:20201030 qq:464884492-->
<a-card style="width: 450px;height:550px;float: left;">
<div slot="title">
  <h2>树形操作(纯数据驱动)<span style="color:blue">@herbert</span></h2>
  <div>
    <a-button @click="dataDriveAddSame">增加同级</a-button>
    <a-divider type="vertical" />
    <a-button @click="dataDriveAddSub">增加上级</a-button>
    <a-divider type="vertical" />
    <a-button @click="dataDriveModify">批改</a-button>
    <a-divider type="vertical" />
    <a-button @click="dataDriveDelete">删除</a-button>
  </div>
</div>
<a-tree :tree-data="treeData" :defaultExpandAll="true"
        :selectedKeys.sync="selectKeys" showLine />
<img src="./assets/gamelogo.png" width="100%" style="margin-top:20px" />
</a-card>

从页面代码中能够看出,再树上绑定了两个属性tree-data,selectedKeys,这里咱们就能够通过selectedKeys绑定值,获取到树形以后抉择的key值.而后应用办法getTreeParentChilds就能够实现同级增加.所以,对用的dataDriveAddSame代码实现如下

// author:herbert date:20201030 qq:464884492
dataDriveAddSame() {
   let parentChilds = this.getTreeParentChilds(this.treeData, this.selectKeys[0])
   parentChilds.forEach(item => console.log(item.title));
   parentChilds.push({
     title: '地心侠士,会玩就停不下来',
     key: new Date().getTime()
   })
},

3.2 增加上级

有了上边的根底,增加上级就很简略了.惟一须要留神的中央就是获取到的对象children属性可能不存在,此时咱们须要$set形式增加属性dataDriveAddSub代码实现如下

// author:herbert date:20201030 qq:464884492
dataDriveAddSub() {
   let selectItem = this.getTreeDataByKey(this.treeData, this.selectKeys[0])
   if (!selectItem.children) {
     this.$set(selectItem, "children", [])
   }
   selectItem.children.push({
     title: 地心侠士,值得你来玩,
     key: new Date().getTime()
   })
   this.$forceUpdate()
   },

3.3 批改节点

能获取到绑定对象,批改节点值也变得简略了,同增加上级一样应用getTreeDataByKey获取以后对象,而后间接批改值就是了.dataDriveModify代码实现如下

// author:herbert date:20201030 qq:464884492
dataDriveModify() {
   let selectItem = this.getTreeDataByKey(this.treeData, this.selectKeys[0])
   selectItem.title = '扫码下方二维码,开始地心探险之旅'
},

3.4 删除节点

删除和增加同级一样,须要找到父级节点children数组,曾经以后对象在父级数组中对应的索引.dataDriveDelete代码实现如下

// author:herbert date:20201030 qq:464884492
dataDriveDelete() {
   let parentChilds = this.getTreeParentChilds(this.treeData, this.selectKeys[0])
   let delIndex = parentChilds.findIndex(item => item.key == this.selectKeys[0])
   parentChilds.splice(delIndex, 1)
},

4. 通过插槽形式树形节点增删改

在ant-tree的api中,树形节点属性title类型能够是字符串,也能够是插槽[string|slot|slot-scope],我么这里须要拿到操作对象,这里应用作用域插槽,对应的页面代码如下

<!-- author:herbert date:20201030 qq:464884492-->
<a-card style="width: 450px;height:550px;float: left;">
<div slot="title">
  <h2>树形操作(采纳作用域插槽)</h2>
  <div>
    采纳作用域插槽,操作按钮对立搁置到树上<span style="color:blue">@小院不小</span>
  </div>
</div>
<a-tree ref="tree1" :tree-data="treeData1" :defaultExpandAll="true" :selectedKeys.sync="selectKeys1" showLine blockNode>
  <template v-slot:title="nodeData">
    <span>{{nodeData.title}}</span>
    <a-button-group style="float:right">
      <a-button size="small" @click="slotAddSame(nodeData)" icon="plus-circle" title="增加同级"></a-button>
      <a-button size="small" @click="slotAddSub(nodeData)" icon="share-alt" title="增加上级"></a-button>
      <a-button size="small" @click="slotModify(nodeData)" icon="form" title="批改"></a-button>
      <a-button size="small" @click="slotDelete(nodeData)" icon="close-circle" title="删除"></a-button>
    </a-button-group>
  </template>
</a-tree>
<img src="./assets/gamelogo.png" width="100%" style="margin-top:20px" />
</a-card>

4.1 增加同级

采纳插槽的形式拿到对象,其实是以后节点对应的属性值,并且是一个浅复制的正本.在源码vc-tree\\src\\TreeNode.jsx中的renderSelector能够找到如下一段代码

const currentTitle = title;
let $title = currentTitle ? (
  <span class={`${prefixCls}-title`}>
    {typeof currentTitle === 'function'
      ? currentTitle({ ...this.$props, ...this.$props.dataRef }, h)
      : currentTitle}
  </span>
) : (
  <span class={`${prefixCls}-title`}>{defaultTitle}</span>
);

从这段代码,能够看到一个dataRef.然而在官网的帮忙文档中齐全没有这个属性的介绍.不晓得者算不算给违心看源码的同学的一种福利.不论从代码层面,还是调试后果看.通过作用域失去的对象,没有父级属性所以不能实现同级增加.slotAddSame代码如下

// author:herbert date:20201030 qq:464884492
slotAddSame(nodeItem) {
console.log(nodeItem)
this.$warn({ content: "采纳插槽形式,找不到父级对象,增加失败!不要想了,去玩地心侠士吧" })
},

4.2 增加上级

尽管失去了对象,然而只是一个正本.所以设置children也是没用的!!

// author:herbert date:20201030 qq:464884492
slotAddSub(nodeItem) {
if (!nodeItem.children) {
  console.log('其实这个判断没有用,这里仅仅是一个正本')
  this.$set(nodeItem, "children", [])
}
nodeItem.children.push({
  title: this.addSubTitle,
  key: new Date().getTime(),
  scopedSlots: { title: 'title' },
  children: []
})
},

4.3 批改节点

批改一样也不能实现,不过上边有提到dataRef,这里简略应用下,能够实现批改title值.

// author:herbert date:20201030 qq:464884492
slotModify(nodeItem) {
   console.log(nodeItem)
   console.log('nodeItem仅仅时渲染Treenode属性的一个浅复制的正本,间接批改Title没有用')
   nodeItem.title = '这里设置是没有用的,去玩游戏劳动一会吧'
   // 这里能够借助dataRef 更新
   nodeItem.dataRef.title = nodeItem.title
 },

4.4 删除节点

很显著,删除也是不能够的.

// author:herbert date:20201030 qq:464884492
slodDelete(nodeItem) {
console.log(nodeItem)
this.$warn({ content: "采纳插槽形式,找不到父级对象,删除失败!很显著,还是去玩地心侠士吧" })
delete nodeItem.dataRef
},

5. 树形事件联合dataRef实现

上边通过插槽形式,仅仅实现了批改性能.特地悲观有没有.不过从设计的角度去思考,给你对象仅仅是帮忙你做自定义渲染,就好多了.接续读官网Api找到事件其中的select事件提供的值,又给了咱们很大的施展空间.到底有多大呢,咱们去源码看看.首先咱们找到触发select事件代码在components\\vc-tree\\src\\TreeNode.jsx文件中,具体代码如下

onSelect(e) {
   if (this.isDisabled()) return;
   const {
     vcTree: { onNodeSelect },
   } = this;
   e.preventDefault();
   onNodeSelect(e, this);
},

从代码中能够看到TreeNodeonSelect其实是调用Tree中的onNodeSelected办法,咱们到components\\vc-tree\\src\\Tree.jsx找到对应的代码如下

 onNodeSelect(e, treeNode) {
   let { _selectedKeys: selectedKeys } = this.$data;
   const { _keyEntities: keyEntities } = this.$data;
   const { multiple } = this.$props;
   const { selected, eventKey } = getOptionProps(treeNode);
   const targetSelected = !selected;
   // Update selected keys
   if (!targetSelected) {
     selectedKeys = arrDel(selectedKeys, eventKey);
   } else if (!multiple) {
     selectedKeys = [eventKey];
   } else {
     selectedKeys = arrAdd(selectedKeys, eventKey);
   }

   // [Legacy] Not found related usage in doc or upper libs
   const selectedNodes = selectedKeys
     .map(key => {
       const entity = keyEntities.get(key);
       if (!entity) return null;

       return entity.node;
     })
     .filter(node => node);

   this.setUncontrolledState({ _selectedKeys: selectedKeys });

   const eventObj = {
     event: 'select',
     selected: targetSelected,
     node: treeNode,
     selectedNodes,
     nativeEvent: e,
   };
   this.__emit('update:selectedKeys', selectedKeys);
   this.__emit('select', selectedKeys, eventObj);
},

联合两个办法,从Tree节点eventObj对象中能够晓得组件select不仅把Tree节点渲染TreeNode缓存数据selectedNodes以及对应实实在在的TreeNode节点node,都提供给了调用方.有了这个node属性,咱们就能够拿到对应节点的上下级关系

接下来咱们说说这个再帮忙文档上没有呈现的dataRef是个什么鬼.
找到文件components\\tree\\Tree.jsx在对应的render函数中咱们能够晓得Tree须要向vc-tree组件传递一个treeData属性,咱们最终应用的传递节点数据也是这个属性名.两段要害代码如下

render(){
   ...
   let treeData = props.treeData || treeNodes;
    if (treeData) {
      treeData = this.updateTreeData(treeData);
    }
   ...
   if (treeData) {
      vcTreeProps.props.treeData = treeData;
   }
   return <VcTree {...vcTreeProps} />;
}

从上边代码能够看到,组件底层调用办法updateTreeData对咱们传入的数据做了解决,这个办法要害代码如下

updateTreeData(treeData) {
   const { $slots, $scopedSlots } = this;
   const defaultFields = { children: 'children', title: 'title', key: 'key' };
   const replaceFields = { ...defaultFields, ...this.$props.replaceFields };
   return treeData.map(item => {
     const key = item[replaceFields.key];
     const children = item[replaceFields.children];
     const { on = {}, slots = {}, scopedSlots = {}, class: cls, style, ...restProps } = item;
     const treeNodeProps = {
       ...restProps,
       icon: $scopedSlots[scopedSlots.icon] || $slots[slots.icon] || restProps.icon,
       switcherIcon:
         $scopedSlots[scopedSlots.switcherIcon] ||
         $slots[slots.switcherIcon] ||
         restProps.switcherIcon,
       title:
         $scopedSlots[scopedSlots.title] ||
         $slots[slots.title] ||
         restProps[replaceFields.title],
       dataRef: item,
       on,
       key,
       class: cls,
       style,
     };
     if (children) {
       // herbert 20200928 增加属性只能操作叶子节点
       if (this.onlyLeafEnable === true) {
         treeNodeProps.disabled = true;
       }
       return { ...treeNodeProps, children: this.updateTreeData(children) };
     }
     return treeNodeProps;
   });
 },
}

从这个办法中咱们看到,在treeNodeProps属性找到了dataRef属性,它的值就是咱们传入treeData中的数据项,所以这个属性是反对双向绑定的哦.这个treeNodeProps最终会渲染到components\\vc-tree\\src\\TreeNode.jsx,组件中去.

弄清楚这两个知识点后,咱们要做的操作就变得简略了.事件驱动页面代码如下

<!-- author:herbert date:20201101 qq:464884492 -->
<a-card style="width: 450px;height:550px;float: left;">
   <div slot="title">
     <h2>树形事件(联合dataRef)<span style="color:blue">@464884492</span></h2>
     <div>
       <a-button @click="eventAddSame">增加同级</a-button>
       <a-divider type="vertical" />
       <a-button @click="eventAddSub">增加上级</a-button>
       <a-divider type="vertical" />
       <a-button @click="eventModify">批改</a-button>
       <a-divider type="vertical" />
       <a-button @click="eventDelete">删除</a-button>
     </div>
   </div>
   <a-tree :tree-data="treeData2" @select="onEventTreeNodeSelected" :defaultExpandAll="true" :selectedKeys.sync="selectKeys2" showLine />
   <img src="./assets/gamelogo.png" width="100%" style="margin-top:20px" />
</a-card>

既然是通过事件驱动,咱们首先得注册对应得事件,代码如下

// author:herbert date:20201101 qq:464884492 
onEventTreeNodeSelected(seleteKeys, e) {
   if (e.selected) {
     this.eventSelectedNode = e.node
     return
   }
   this.eventSelectedNode = null
},

在事件中,咱们保留以后抉择TreeNode不便后续的减少批改删除

5.1 增加同级

利用vue虚构dom,找到父级

// author:herbert date:20201101 qq:464884492 
eventAddSame() {
   // 查找父级
   let dataRef = this.eventSelectedNode.$parent.dataRef
   if (!dataRef.children) {
     this.$set(dataRef, 'children', [])
   }
   dataRef.children.push({
     title: '地心侠士好玩,值得分享',
     key: new Date().getTime()
   })
 },

5.2 增加上级

间接应用对象dataRef,留神children应用$set办法

// author:herbert date:20201101 qq:464884492
eventAddSub() {
   let dataRef = this.eventSelectedNode.dataRef
   if (!dataRef.children) {
     this.$set(dataRef, 'children', [])
   }
   dataRef.children.push({
     title: '地心侠士,还有很多bug欢送吐槽',
     key: new Date().getTime(),
     scopedSlots: { title: 'title' },
     children: []
   })
   },

5.3 批改节点

批改间接批改dataRef对应的值

// author:herbert date:20201101 qq:464884492 
eventModify() {
   let dataRef = this.eventSelectedNode.dataRef
   dataRef.title = '地心侠士,今天及改完bug'
   },

5.4 删除节点

通过vue虚构dom找到父级dataRef,从children中移除选择项就能够

// author:herbert date:20201101 qq:464884492 
 eventDelete() {
   let parentDataRef = this.eventSelectedNode.$parent.dataRef
   // 判断是否是顶层
   const children = parentDataRef.children
   const currentDataRef = this.eventSelectedNode.dataRef
   const index = children.indexOf(currentDataRef)
   children.splice(index, 1)
 }

6. 总结

这个知识点,从demo到最终实现.前前后后破费快一个月的工夫.期间查源码,做测试,很费时间.不过把这个点说分明了,我感觉很值得!如果须要Demo源码请扫描下方的二维码,关注公众号[小院不小],回复ant-tree获取.对于ant-desgin-vue这套组件库来说相比我以前应用的easyUi组件库来说,感觉跟适宜网页展现一类.做一些后盾零碎,须要提供大量操作,感觉还比拟乏力

关于ant-design:antdesignvue中tree增删改

ant-design-vue中tree增删改

1. 应用背景

2. 以后痛点

3. 数据驱动实现树形节点增删改

3.1 增加同级节点

3.2 增加上级

3.3 批改节点

3.4 删除节点

4. 通过插槽形式树形节点增删改

4.1 增加同级

4.2 增加上级

4.3 批改节点

4.4 删除节点

5. 树形事件联合dataRef实现

5.1 增加同级

5.2 增加上级

5.3 批改节点

5.4 删除节点

6. 总结

评论

发表回复取消回复

更多文章

DDN HPC 存储硬件架构设计深度分析

探秘IO500：从Lustre并行文件系统出发，开启HPC存储性能新征程

苹果iOS打包的ipa应用无法安装？一篇文章带你了解可能的原因及排查方法

图解Golang：从零开始实现简易版过期LRU缓存

关于ant-design:antdesignvue中tree增删改

ant-design-vue中tree增删改

1. 应用背景

2. 以后痛点

3. 数据驱动实现树形节点增删改

3.1 增加同级节点

3.2 增加上级

3.3 批改节点

3.4 删除节点

4. 通过插槽形式树形节点增删改

4.1 增加同级

4.2 增加上级

4.3 批改节点

4.4 删除节点

5. 树形事件联合dataRef实现

5.1 增加同级

5.2 增加上级

5.3 批改节点

5.4 删除节点

6. 总结

评论

发表回复 取消回复

更多文章

DDN HPC 存储硬件架构设计深度分析

探秘IO500：从Lustre并行文件系统出发，开启HPC存储性能新征程

苹果iOS打包的ipa应用无法安装？一篇文章带你了解可能的原因及排查方法

图解Golang：从零开始实现简易版过期LRU缓存

发表回复取消回复