element UI中实现tree树形控件部分选中时父级节点也被选中-Toy模板网

这篇具有很好参考价值的文章主要介绍了element UI中实现tree树形控件部分选中时父级节点也被选中。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

vue + element UI中实现tree树形控件部分选中时父级节点也被选中

最近有一个很奇葩的需求，在使用element UI中的tree树形控件选中功能时，子节点部分选中时父级节点也要被选中，并且回显也要保留部分子节点选中父节点半选中状态。
按照平时正常逻辑来处理，提交时只需要获取选中项的父级节点一并提交即可，这样正常提交是没有任何问题，但是回显时由于提交了父级id导致没有选中的子节点也被选中
提交时的状态：
elementui树形控件选中,js,ui,javascript,前端,elementui
回显时的状态：

结合element UI的Tree 树形控件api文档，总结了以下两个解决方案，直接上干货

一、利用 check-strictly 属性

elementui树形控件选中,js,ui,javascript,前端,elementui

1. 设置check-strictly的值为一个变量，默认值为false

2. 回显的时候，接口请求选中数据成功时给check-strictly赋值true，树形控件选中状态加载完成以后再赋值false

<el-tree
 class="tree-border"
  :data="menuOptionsSYS"
  show-checkbox
  ref="menuSYS"
  node-key="id"
  empty-text="暂无数据"
  :props="defaultProps"
  :check-strictly="isCheckStrictly"
></el-tree>

<script>
export default {
  data() {
    return {
      isCheckStrictly: false,
    }
  },
  methods: {
	handleGetData() {
	  this.isCheckStrictly = true
	  // 请求选中数据接口
	  getRole().then((res) => {
		this.$nextTick(() => {
		  this.$refs.menuSYS.setCheckedKeys(res.checkedKeys, false)
		  // 数据加载完成后再赋值false
		  setTimeout(() => {
            this.isCheckStrictly = false
          }, 500);
		})
	  })
	}
  }
}
</script>

这个方法有一个问题，回显的时候部分选中的父节点会是全选中状态
elementui树形控件选中,js,ui,javascript,前端,elementui

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

getHalfCheckedKeys() ：返回选中子节点的key
getCheckedKeys() ：返回选中子节点的父节点的key

1. 提交的时候两个方法的值一起提交

let listF = this.$refs.menuSYS.getHalfCheckedKeys()
let listC = this.$refs.menuSYS.getCheckedKeys()
let listCheck = listF.concat(listC)  // 最终提交的数据

2. 回显时用getNode()和setCheckedKeys()方法

利用getNode()方法获取到当前节点，判断当前节点是否是叶子节点，是的话存入 listCheck 数组中，再使用 setCheckedKeys() 方法将数据回显选中，从而实现子节点部分选中父级节点半选中状态

handleGetData() {
  // 请求选中数据接口
  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)
	})
  })
}