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

更新時(shí)間：2020年11月03日 09:19:01 作者：_herbert

這篇文章主要介紹了ant-design-vue中tree增刪改的操作方法,本文給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下

1. 使用背景

新項(xiàng)目中使用了ant-design-vue組件庫.該組件庫完全根基數(shù)據(jù)雙向綁定的模式實(shí)現(xiàn).只有表單組件提供少量的方法.所以,在使用ant-design-vue時(shí),一定要從改變數(shù)據(jù)的角度去切換UI顯示效果.然而,在樹形控件a-tree的使用上,單從數(shù)據(jù)驅(qū)動(dòng)上去考慮,感體驗(yàn)效果實(shí)在不好.

2. 當(dāng)前痛點(diǎn)

通過閱讀官方幫助文檔,針對(duì)樹形控件數(shù)據(jù)綁定.需要將數(shù)據(jù)構(gòu)造成一個(gè)包含children,title,key屬性的大對(duì)象.這樣一個(gè)對(duì)象,要么通過后端構(gòu)造好這樣的json對(duì)象,要么就是后端給前端一個(gè)json數(shù)組,前端根據(jù)上下級(jí)關(guān)系構(gòu)建這么一個(gè)樹形對(duì)象.數(shù)據(jù)綁定好,就可以成功的渲染成我們想要的UI效果了.可痛點(diǎn)在哪里呢?

樹形加載成功后,我要向當(dāng)前的樹形添加一個(gè)同級(jí)以及下級(jí)節(jié)點(diǎn)該如何操作(增)
樹形加載成功后,我要修改任意一個(gè)樹形節(jié)點(diǎn)該如何操作(改)
樹形加載成功后,我要?jiǎng)h除一個(gè)樹形節(jié)點(diǎn)該如何操作(刪)

以上操作,都要求不重新加載樹形控件條件下完成.經(jīng)過測(cè)試整理出了三個(gè)可行方案

數(shù)據(jù)驅(qū)動(dòng)
作用域插槽
節(jié)點(diǎn)事件

3. 數(shù)據(jù)驅(qū)動(dòng)實(shí)現(xiàn)樹形節(jié)點(diǎn)增刪改

我們可以在幫助文檔中找到名為selectedKeys(.sync)屬性,sync表示該屬性支持雙向操作.但是,這里僅僅獲取的是一個(gè)key值,并不是需要的綁定對(duì)象.所以,需要通過這key值找到這個(gè)對(duì)象.需要找這個(gè)對(duì)象就相當(dāng)惡心了

如果后端返回是構(gòu)建好的數(shù)據(jù),需要遍歷這個(gè)樹形數(shù)據(jù)中找到和這個(gè)key值對(duì)應(yīng)的對(duì)象.我能想到的就是通過頂層節(jié)點(diǎn)遞歸查找.可是控件都渲染完成了,都知道每個(gè)節(jié)點(diǎn)的數(shù)據(jù).我為什要重新查找一遍呢???
如果后端返回的僅僅是一個(gè)數(shù)組,這個(gè)剛才有提到需要重新構(gòu)建這部分?jǐn)?shù)據(jù)為對(duì)象.這樣查找這個(gè)對(duì)象又分兩種情況

a. 如果列表數(shù)據(jù)和構(gòu)建后樹形對(duì)象采用克隆的方式,也就是列表中對(duì)象的地址和樹形中相同key值對(duì)象的地址不同.需要通過方法1遍歷重新構(gòu)造后的樹形數(shù)據(jù)
b. 如果列表數(shù)據(jù)中的對(duì)象和構(gòu)建后對(duì)應(yīng)的節(jié)點(diǎn)是相同的對(duì)象地址.可以直接查找這個(gè)列表數(shù)據(jù)得到對(duì)應(yīng)的對(duì)象.

所以,惡心的地方就在于構(gòu)建好一個(gè)樹,我又得遍歷這個(gè)樹查找某個(gè)節(jié)點(diǎn),或者采用方案b這種空間換時(shí)間的做法

這里我們假設(shè)數(shù)據(jù),已經(jīng)是構(gòu)建成樹形的數(shù)據(jù)格式.要實(shí)現(xiàn)數(shù)據(jù)驅(qū)動(dòng)的首要任務(wù)需要完成兩個(gè)核心方法

根據(jù)當(dāng)前節(jié)點(diǎn)key值查找節(jié)點(diǎn)對(duì)象getTreeDataByKey
根據(jù)當(dāng)前節(jié)點(diǎn)key值查找父級(jí)節(jié)點(diǎn)children集合getTreeParentChilds

兩個(gè)方法代碼分別如下

// author:herbert date:20201024 qq:464884492
// 根據(jù)key獲取與之相等的數(shù)據(jù)對(duì)象
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
// 根據(jù)key獲取父級(jí)節(jié)點(diǎn)children數(shù)組
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 添加同級(jí)節(jié)點(diǎn)

添加同級(jí)節(jié)點(diǎn),需要把新增加的數(shù)據(jù),添加到當(dāng)前選中節(jié)點(diǎn)的父級(jí)的children數(shù)組中.所以,添加節(jié)點(diǎn)的難點(diǎn)在如何找到當(dāng)前選中節(jié)點(diǎn)的綁定對(duì)象的父級(jí)對(duì)象.頁面代碼如下

<!-- author:herbert date:20201030 qq:464884492-->
<a-card style="width: 450px;height:550px;float: left;">
<div slot="title">
 <h2>樹形操作(純數(shù)據(jù)驅(qū)動(dòng))<span style="color:blue">@herbert</span></h2>
 <div>
 <a-button @click="dataDriveAddSame">添加同級(jí)</a-button>
 <a-divider type="vertical" />
 <a-button @click="dataDriveAddSub">添加下級(jí)</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>

從頁面代碼中可以看出,再樹上綁定了兩個(gè)屬性tree-data,selectedKeys,這里我們就可以通過selectedKeys綁定值,獲取到樹形當(dāng)前選擇的key值.然后使用方法getTreeParentChilds就可以實(shí)現(xiàn)同級(jí)添加.所以,對(duì)用的dataDriveAddSame代碼實(shí)現(xiàn)如下

// 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: '地心俠士,會(huì)玩就停不下來',
  key: new Date().getTime()
 })
},

3.2 添加下級(jí)

有了上邊的基礎(chǔ),添加下級(jí)就很簡(jiǎn)單了.唯一需要注意的地方就是獲取到的對(duì)象children屬性可能不存在,此時(shí)我們需要$set方式添加屬性dataDriveAddSub代碼實(shí)現(xiàn)如下

// 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 修改節(jié)點(diǎn)

能獲取到綁定對(duì)象,修改節(jié)點(diǎn)值也變得簡(jiǎn)單了,同添加下級(jí)一樣使用getTreeDataByKey獲取當(dāng)前對(duì)象,然后直接修改值就是了.dataDriveModify代碼實(shí)現(xiàn)如下

// author:herbert date:20201030 qq:464884492
dataDriveModify() {
 let selectItem = this.getTreeDataByKey(this.treeData, this.selectKeys[0])
 selectItem.title = '掃碼下方二維碼,開始地心探險(xiǎn)之旅'
},

3.4 刪除節(jié)點(diǎn)

刪除和添加同級(jí)一樣,需要找到父級(jí)節(jié)點(diǎn)children數(shù)組,已經(jīng)當(dāng)前對(duì)象在父級(jí)數(shù)組中對(duì)應(yīng)的索引.dataDriveDelete代碼實(shí)現(xiàn)如下

// 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. 通過插槽方式樹形節(jié)點(diǎn)增刪改

在ant-tree的api中,樹形節(jié)點(diǎn)屬性title類型可以是字符串,也可以是插槽[string|slot|slot-scope],我么這里需要拿到操作對(duì)象,這里使用作用域插槽,對(duì)應(yīng)的頁面代碼如下

<!-- author:herbert date:20201030 qq:464884492-->
<a-card style="width: 450px;height:550px;float: left;">
<div slot="title">
 <h2>樹形操作(采用作用域插槽)</h2>
 <div>
 采用作用域插槽,操作按鈕統(tǒng)一放置到樹上<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="添加同級(jí)"></a-button>
  <a-button size="small" @click="slotAddSub(nodeData)" icon="share-alt" title="添加下級(jí)"></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 添加同級(jí)

采用插槽的方式拿到對(duì)象,其實(shí)是當(dāng)前節(jié)點(diǎn)對(duì)應(yīng)的屬性值,并且是一個(gè)淺復(fù)制的副本.在源碼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>
);

從這段代碼,可以看到一個(gè)dataRef.但是在官方的幫助文檔中完全沒有這個(gè)屬性的介紹.不知道者算不算給愿意看源碼的同學(xué)的一種福利.不管從代碼層面,還是調(diào)試結(jié)果看.通過作用域得到的對(duì)象,沒有父級(jí)屬性所以不能實(shí)現(xiàn)同級(jí)添加.slotAddSame代碼如下

// author:herbert date:20201030 qq:464884492
slotAddSame(nodeItem) {
console.log(nodeItem)
this.$warn({ content: "采用插槽方式,找不到父級(jí)對(duì)象,添加失敗!不要想了,去玩地心俠士吧" })
},

4.2 添加下級(jí)

雖然得到了對(duì)象,但是只是一個(gè)副本.所以設(shè)置children也是沒用的!!

// author:herbert date:20201030 qq:464884492
slotAddSub(nodeItem) {
if (!nodeItem.children) {
 console.log('其實(shí)這個(gè)判斷沒有用,這里僅僅是一個(gè)副本')
 this.$set(nodeItem, "children", [])
}
nodeItem.children.push({
 title: this.addSubTitle,
 key: new Date().getTime(),
 scopedSlots: { title: 'title' },
 children: []
})
},

4.3 修改節(jié)點(diǎn)

修改一樣也不能實(shí)現(xiàn),不過上邊有提到dataRef,這里簡(jiǎn)單使用下,可以實(shí)現(xiàn)修改title值.

// author:herbert date:20201030 qq:464884492
slotModify(nodeItem) {
 console.log(nodeItem)
 console.log('nodeItem僅僅時(shí)渲染Treenode屬性的一個(gè)淺復(fù)制的副本,直接修改Title沒有用')
 nodeItem.title = '這里設(shè)置是沒有用的,去玩游戲休息一會(huì)吧'
 // 這里可以借助dataRef 更新
 nodeItem.dataRef.title = nodeItem.title
 },

4.4 刪除節(jié)點(diǎn)

很明顯,刪除也是不可以的.

// author:herbert date:20201030 qq:464884492
slodDelete(nodeItem) {
console.log(nodeItem)
this.$warn({ content: "采用插槽方式,找不到父級(jí)對(duì)象,刪除失敗!很明顯,還是去玩地心俠士吧" })
delete nodeItem.dataRef
},

5. 樹形事件結(jié)合dataRef實(shí)現(xiàn)

上邊通過插槽方式,僅僅實(shí)現(xiàn)了修改功能.特別失望有沒有.不過從設(shè)計(jì)的角度去考慮,給你對(duì)象僅僅是幫助你做自定義渲染,就好多了.接續(xù)讀官方Api找到事件其中的select事件提供的值,又給了我們很大的發(fā)揮空間.到底有多大呢,我們?nèi)ピ创a看看.首先我們找到觸發(fā)select事件代碼在components\vc-tree\src\TreeNode.jsx文件中,具體代碼如下

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

從代碼中可以看到TreeNodeonSelect其實(shí)是調(diào)用Tree中的onNodeSelected方法,我們到components\vc-tree\src\Tree.jsx找到對(duì)應(yīng)的代碼如下

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);
},

結(jié)合兩個(gè)方法,從Tree節(jié)點(diǎn)eventObj對(duì)象中可以知道組件select不僅把Tree節(jié)點(diǎn)渲染TreeNode緩存數(shù)據(jù)selectedNodes以及對(duì)應(yīng)實(shí)實(shí)在在的TreeNode節(jié)點(diǎn)node,都提供給了調(diào)用方.有了這個(gè)node屬性,我們就可以拿到對(duì)應(yīng)節(jié)點(diǎn)的上下級(jí)關(guān)系

接下來我們說說這個(gè)再幫助文檔上沒有出現(xiàn)的dataRef是個(gè)什么鬼.
找到文件components\tree\Tree.jsx在對(duì)應(yīng)的render函數(shù)中我們可以知道Tree需要向vc-tree組件傳遞一個(gè)treeData屬性,我們最終使用的傳遞節(jié)點(diǎn)數(shù)據(jù)也是這個(gè)屬性名.兩段關(guān)鍵代碼如下

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

從上邊代碼可以看到,組件底層調(diào)用方法updateTreeData對(duì)我們傳入的數(shù)據(jù)做了處理,這個(gè)方法關(guān)鍵代碼如下

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 添加屬性只能操作葉子節(jié)點(diǎn)
  if (this.onlyLeafEnable === true) {
   treeNodeProps.disabled = true;
  }
  return { ...treeNodeProps, children: this.updateTreeData(children) };
  }
  return treeNodeProps;
 });
 },
}

從這個(gè)方法中我們看到,在treeNodeProps屬性找到了dataRef屬性,它的值就是我們傳入treeData中的數(shù)據(jù)項(xiàng),所以這個(gè)屬性是支持雙向綁定的哦.這個(gè)treeNodeProps最終會(huì)渲染到components\vc-tree\src\TreeNode.jsx,組件中去.

弄清楚這兩個(gè)知識(shí)點(diǎn)后,我們要做的操作就變得簡(jiǎn)單了.事件驅(qū)動(dòng)頁面代碼如下

<!-- author:herbert date:20201101 qq:464884492 -->
<a-card style="width: 450px;height:550px;float: left;">
 <div slot="title">
  <h2>樹形事件(結(jié)合dataRef)<span style="color:blue">@464884492</span></h2>
  <div>
  <a-button @click="eventAddSame">添加同級(jí)</a-button>
  <a-divider type="vertical" />
  <a-button @click="eventAddSub">添加下級(jí)</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>

既然是通過事件驅(qū)動(dòng),我們首先得注冊(cè)對(duì)應(yīng)得事件,代碼如下

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

在事件中,我們保存當(dāng)前選擇TreeNode方便后續(xù)的增加修改刪除

5.1 添加同級(jí)

利用vue虛擬dom,找到父級(jí)

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

5.2 添加下級(jí)

直接使用對(duì)象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 修改節(jié)點(diǎn)

修改直接修改dataRef對(duì)應(yīng)的值

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

5.4 刪除節(jié)點(diǎn)

通過vue虛擬dom找到父級(jí)dataRef,從children中移除選擇項(xiàng)就可以

// 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. 總結(jié)

這個(gè)知識(shí)點(diǎn),從demo到最終完成.前前后后花費(fèi)快一個(gè)月的時(shí)間.期間查源碼,做測(cè)試,很費(fèi)時(shí)間.不過把這個(gè)點(diǎn)說清楚了,我覺得很值得!如果需要Demo源碼請(qǐng)掃描下方的二維碼,關(guān)注公眾號(hào)[小院不小],回復(fù)ant-tree獲取.關(guān)于ant-desgin-vue這套組件庫來說相比我以前使用的easyUi組件庫來說,感覺跟適合網(wǎng)頁展示一類.做一些后臺(tái)系統(tǒng),需要提供大量操作,感覺還比較乏力

到此這篇關(guān)于ant-design-vue中tree增刪改的操作方法的文章就介紹到這了,更多相關(guān)ant-design-vue中tree增刪改內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: