antd中tree树点击文字展开节点、同级只展开一个节点及获取半选节点

简述:

1. 点击文字展开节点，通过点击文字节点触发点击事件，通过点击判断节点是true/false，并利用onExpand()触发节点展开/关闭。
2. 同级实现通过获取父级节点并在expandedKeys中只留取当前节点
3. 通过halfCheckedKeys去获取当前选取节点的半选节点

1.dom节点 

<template>
  <a-tree
     checkable
     ref="treeRef"
     :tree-data="treedata"
     v-model:expandedKeys="expandedKeys"
     v-model:selectedKeys="selectedKeys"
     v-model:checkedKeys="checkedKeys"
     :replace-fields="replaceFields"
     @expand="expandChange"
     @select="nodeSelect"
     @check="nodeCheck"
  />
</template>

2.js代码

<script>
import {reactive,toRef} from vue
  export default {
    setup(props){
      const state = reactive({
        treedata:[],
        expandedKeys:[],
        selectedKeys:[],
        checkedKeys:[],
        lastSelectKey:[],
        endcheckedKeys:[],
        replaceFields:{title:'name',key:'id'}
      })
      // 同级只展开一个节点
      function expandChange(expandedKeys, { expanded, node }){
        const tempKeys = (node.parent ? node.parent.children :                     
          state.treedata).map(({ id }) => id)
        if (expanded) {
          state.expandedKeys = tempKeys.filter(temp => temp === node.eventKey)
        } else {
         state.expandedKeys = expandedKeys;
        }
      }
      // 点击文字展开节点
      function nodeSelect(selectedKeys, {selected, selectedNodes, node, event}){
        if(!selected) {
          state.selectedKeys = [].concat(state.lastSelectKey)
        }else{
          state.lastSelectKey = [].concat(state.selectedKeys)
        }
        const targetItem = filterTargetItem(state.treedata,state.lastSelectKey[0])
        if(targetItem.children && targetItem.children.length > 0){
          node.onExpand()
        }
      }
      // 筛查目标元素Obj
      function filterTargetItem(data,target){
      let targetObj = {}
        for(let i=0;i<data.length;i++){
          if(data[i].id === target || data[i].name === target){
            targetObj = data[i]
            return targetObj
          }
          if(data[i].children && data[i].children.length > 0){
          targetObj = filterTargetItem(data[i].children,target)
          if(targetObj!=undefined) return targetObj;
          }
        }
      }
      // 获取
      function nodeCheck(checkedKeys, e){
        state.endcheckedKeys = checkedKeys.concat(e.halfCheckedKeys)
      }
      return{
        ...toRef(state),
        expandChange,
        nodeSelect,
        nodeCheck
      }
    }
  }
</script>