vue + element UI中實(shí)現(xiàn)tree樹形控件部分選中時(shí)父級(jí)節(jié)點(diǎn)也被選中

最近有一個(gè)很奇葩的需求，在使用element UI中的tree樹形控件選中功能時(shí)，子節(jié)點(diǎn)部分選中時(shí)父級(jí)節(jié)點(diǎn)也要被選中，并且回顯也要保留部分子節(jié)點(diǎn)選中父節(jié)點(diǎn)半選中狀態(tài)。
按照平時(shí)正常邏輯來(lái)處理，提交時(shí)只需要獲取選中項(xiàng)的父級(jí)節(jié)點(diǎn)一并提交即可，這樣正常提交是沒(méi)有任何問(wèn)題，但是回顯時(shí)由于提交了父級(jí)id導(dǎo)致沒(méi)有選中的子節(jié)點(diǎn)也被選中
提交時(shí)的狀態(tài)：

回顯時(shí)的狀態(tài)：

結(jié)合element UI的Tree 樹形控件api文檔，總結(jié)了以下兩個(gè)解決方案，直接上干貨

一、 利用 check-strictly 屬性

1. 設(shè)置check-strictly的值為一個(gè)變量，默認(rèn)值為false

2. 回顯的時(shí)候，接口請(qǐng)求選中數(shù)據(jù)成功時(shí)給check-strictly賦值true，樹形控件選中狀態(tài)加載完成以后再賦值false

<el-tree
 class="tree-border"
  :data="menuOptionsSYS"
  show-checkbox
  ref="menuSYS"
  node-key="id"
  empty-text="暫無(wú)數(shù)據(jù)"
  :props="defaultProps"
  :check-strictly="isCheckStrictly"
></el-tree>

<script>
export default {
  data() {
    return {
      isCheckStrictly: false,
    }
  },
  methods: {
	handleGetData() {
	  this.isCheckStrictly = true
	  // 請(qǐng)求選中數(shù)據(jù)接口
	  getRole().then((res) => {
		this.$nextTick(() => {
		  this.$refs.menuSYS.setCheckedKeys(res.checkedKeys, false)
		  // 數(shù)據(jù)加載完成后再賦值false
		  setTimeout(() => {
            this.isCheckStrictly = false
          }, 500);
		})
	  })
	}
  }
}
</script>

這個(gè)方法有一個(gè)問(wèn)題，回顯的時(shí)候部分選中的父節(jié)點(diǎn)會(huì)是全選中狀態(tài)

二、利用 getHalfCheckedKeys() 和 getCheckedKeys() 方法

getHalfCheckedKeys() ：返回選中子節(jié)點(diǎn)的key
getCheckedKeys() ：返回選中子節(jié)點(diǎn)的父節(jié)點(diǎn)的key

1. 提交的時(shí)候兩個(gè)方法的值一起提交

let listF = this.$refs.menuSYS.getHalfCheckedKeys()
let listC = this.$refs.menuSYS.getCheckedKeys()
let listCheck = listF.concat(listC)  // 最終提交的數(shù)據(jù)

2. 回顯時(shí)用getNode()和setCheckedKeys()方法

利用getNode()方法獲取到當(dāng)前節(jié)點(diǎn)，判斷當(dāng)前節(jié)點(diǎn)是否是葉子節(jié)點(diǎn)，是的話存入 listCheck 數(shù)組中，再使用 setCheckedKeys() 方法將數(shù)據(jù)回顯選中，從而實(shí)現(xiàn)子節(jié)點(diǎn)部分選中父級(jí)節(jié)點(diǎn)半選中狀態(tài)

handleGetData() {
  // 請(qǐng)求選中數(shù)據(jù)接口
  getRole().then((res) => {
	this.$nextTick(() => {
	  let listCheck = []
	  res.checkedKeys.forEach(item => {
        if (this.$refs.menuSYS.getNode(item) && (!this.$refs.menuSYS.getNode(item).childNodes || !this.$refs.menuSYS.getNode(item).childNodes.length)) {
          listCheck.push(item)
        }
      })
      this.$refs.menuSYS.setCheckedKeys(listCheck)
	})
  })
}

以上是我個(gè)人嘗試的解決方案，希望對(duì)大家有所幫助，大家有更好的解決方案也可以分享一下喲~文章來(lái)源地址http://www.zghlxwxcb.cn/news/detail-715728.html

到了這里，關(guān)于element UI中實(shí)現(xiàn)tree樹形控件部分選中時(shí)父級(jí)節(jié)點(diǎn)也被選中的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！