ant-design-vue中tree增删改的操作方法


Posted in Javascript onNovember 03, 2020

1. 使用背景

新项目中使用了ant-design-vue组件库.该组件库完全根基数据双向绑定的模式实现.只有表单组件提供少量的方法.所以,在使用ant-design-vue时,一定要从改变数据的角度去切换UI显示效果.然而,在树形控件a-tree的使用上,单从数据驱动上去考虑,感体验效果实在不好.

2. 当前痛点

通过阅读官方帮助文档,针对树形控件数据绑定.需要将数据构造成一个包含children,title,key属性的大对象.这样一个对象,要么通过后端构造好这样的json对象,要么就是后端给前端一个json数组,前端根据上下级关系构建这么一个树形对象.数据绑定好,就可以成功的渲染成我们想要的UI效果了.可痛点在哪里呢?

  • 树形加载成功后,我要向当前的树形添加一个同级以及下级节点该如何操作(增)
  • 树形加载成功后,我要修改任意一个树形节点该如何操作(改)
  • 树形加载成功后,我要删除一个树形节点该如何操作(删)

以上操作,都要求不重新加载树形控件条件下完成.经过测试整理出了三个可行方案

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

ant-design-vue中tree增删改的操作方法

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

我们可以在帮助文档中找到名为selectedKeys(.sync)属性,sync表示该属性支持双向操作.但是,这里仅仅获取的是一个key值,并不是需要的绑定对象.所以,需要通过这key值找到这个对象.需要找这个对象就相当恶心了

  1. 如果后端返回是构建好的数据,需要遍历这个树形数据中找到和这个key值对应的对象.我能想到的就是通过顶层节点递归查找.可是控件都渲染完成了,都知道每个节点的数据.我为什要重新查找一遍呢???
  2. 如果后端返回的仅仅是一个数组,这个刚才有提到需要重新构建这部分数据为对象.这样查找这个对象又分两种情况

a. 如果列表数据和构建后树形对象采用克隆的方式,也就是列表中对象的地址和树形中相同key值对象的地址不同.需要通过方法1遍历重新构造后的树形数据
b. 如果列表数据中的对象和构建后对应的节点是相同的对象地址.可以直接查找这个列表数据得到对应的对象.

所以,恶心的地方就在于构建好一个树,我又得遍历这个树查找某个节点,或者采用方案b这种空间换时间的做法

这里我们假设数据,已经是构建成树形的数据格式.要实现数据驱动的首要任务需要完成两个核心方法

  1. 根据当前节点key值查找节点对象getTreeDataByKey
  2. 根据当前节点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-vue中tree增删改的操作方法的文章就介绍到这了,更多相关ant-design-vue中tree增删改内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章希望大家以后多多支持三水点靠木!

Javascript 相关文章推荐
JavaScript对IE操作的经典代码(推荐)
Mar 10 Javascript
js、jquery图片动画、动态切换示例代码
Jun 03 Javascript
js实现浏览器窗口大小被改变时触发事件的方法
Feb 02 Javascript
浅谈node.js中async异步编程
Oct 22 Javascript
跟我学习javascript的最新标准ES6
Nov 20 Javascript
JQuery实现DIV其他动画效果的简单实例
Sep 18 Javascript
解决URL地址中的中文乱码问题的办法
Feb 10 Javascript
javascript数据结构之串的概念与用法分析
Apr 12 Javascript
浅谈箭头函数写法在ReactJs中的使用
Aug 22 Javascript
vue项目打包上传github并制作预览链接(pages)
Apr 19 Javascript
基于element-ui封装可搜索的懒加载tree组件的实现
May 22 Javascript
Element MessageBox弹框的具体使用
Jul 27 Javascript
Vue+Vant 图片上传加显示的案例
Nov 03 #Javascript
vant-ui AddressEdit地址编辑和van-area的用法说明
Nov 03 #Javascript
antd中table展开行默认展示,且不需要前边的加号操作
Nov 02 #Javascript
React Ant Design树形表格的复杂增删改操作
Nov 02 #Javascript
vue缓存之keep-alive的理解和应用详解
Nov 02 #Javascript
详解vue-router的导航钩子(导航守卫)
Nov 02 #Javascript
vue+elementUI中表格高亮或字体颜色改变操作
Nov 02 #Javascript
You might like
php 中奖概率算法实现代码
2017/01/25 PHP
jquery pagination插件实现无刷新分页代码
2009/10/13 Javascript
JS实现在Repeater控件中创建可隐藏区域的代码
2010/09/16 Javascript
MooTools 页面滚动浮动层智能定位实现代码
2011/08/23 Javascript
jqgrid 编辑添加功能详细解析
2013/11/08 Javascript
Jquery取得iframe下内容的方法
2013/11/18 Javascript
二叉树的非递归后序遍历算法实例详解
2014/02/07 Javascript
JavaScript中的数学运算介绍
2014/12/29 Javascript
js正则表达式匹配数字字母下划线等
2015/04/14 Javascript
javascript中this的四种用法
2015/05/11 Javascript
BootStrap中Datetimepicker和uploadify插件应用实例小结
2016/05/26 Javascript
Bootstrap table简单使用总结
2017/02/15 Javascript
jQuery实现弹幕效果
2017/02/17 Javascript
基于vue2.0实现的级联选择器
2017/06/09 Javascript
Bootstrap modal只加载一次数据的解决办法(推荐)
2017/11/24 Javascript
mongoose更新对象的两种方法示例比较
2017/12/19 Javascript
解决vue-cli项目打包出现空白页和路径错误的问题
2018/09/04 Javascript
JS数组Object.keys()方法的使用示例
2019/06/05 Javascript
Layui 数据表格批量删除和多条件搜索的实例
2019/09/04 Javascript
Vue组件简易模拟实现购物车
2020/12/21 Vue.js
Python处理RSS、ATOM模块FEEDPARSER介绍
2015/02/18 Python
Python使用wxPython实现计算器
2018/01/30 Python
在keras中model.fit_generator()和model.fit()的区别说明
2020/06/17 Python
Python 没有main函数的原因
2020/07/10 Python
Python读取Excel一列并计算所有对象出现次数的方法
2020/09/04 Python
Python第三方库安装缓慢的解决方法
2021/02/06 Python
联想台湾官网:Lenovo TW
2018/05/09 全球购物
李维斯牛仔裤英国官方网站:Levi’s英国
2019/10/10 全球购物
实习销售业务员自我鉴定
2013/09/21 职场文书
单位授权委托书范文
2014/08/02 职场文书
中国文明网向国旗敬礼寄语大全
2014/09/27 职场文书
2016年安全生产先进个人事迹材料
2016/02/29 职场文书
python使用XPath解析数据爬取起点小说网数据
2021/04/22 Python
Opencv中cv2.floodFill算法的使用
2021/06/18 Python
Redis 中使用 list,streams,pub/sub 几种方式实现消息队列的问题
2022/03/16 Redis
Apache自带的ab压力测试工具的实现
2022/07/23 Servers