ant框架下，树组件的踩坑记录（vue）[树组件作为子组件在父组件中调用，子组件的数据源比父组件中传的值先执行]

1.点击节点标题展开下级菜单

如上图树组件所示，只有点击旁边的小三角才能实现展开下一级菜单，而业务的需求是，点击标题可以展开下一级，通过查阅资料，了解到在组件中有一个onSelect(v,k)事件，该事件是监听点击节点的事件
所以代码是

<a-tree
      :disabled="disabled"
      show-icon
      v-model="checkedKeys"
      :expanded-keys="expandedKeys"
      :auto-expand-parent="autoExpandParent"
      :tree-data="treeData"
      :defaultSelectedKeys="defaultSelectedKeys"
      @expand="onExpand"
      @check="onCheck"
      @select="onSelect"
    >

onSelect(v, K) {
      this.autoExpandParent = true
      K.node.onExpand()
    },

点击标题展开节点的本质是扩大了小三角的点击范围

2.将树组件中的数据源直接替换成从后端调用接口得到的数据源
在树组件中，写一个方法

setData(menu) {
      // 替换数据源
      if (menu) {
        this.treeData = menu
      }
      this.filterAllChildren(this.treeData)
    },
// 递归，去除所有children嵌套，返回新的数组
    filterAllChildren(list) {
      return list.map((item) => {
        this.mapArrs.push({ key: item.key, title: item.title })
        if (item.children) {
          this.filterAllChildren(item.children)
        }
      })
    },

这种方法就可以替换数据源
在引用树组件的父组件中，引用一下setDate

<i-tree ref="treeMenu" @selectTreeNode="selectTreeNode" :expKeys="expKeys" :ckKeys="ckKeys" :isFAQ="true"></i-tree>

getLeftMenu() {
      const { identityId } = JSON.parse(sessionStorage.getItem('identityMessage'))
      getAction("接口地址").then((res) => {
        if (res.success) {
          if (res.result && res.result.length) {
            var filterValue = this.setKey(res.result)
            this.$nextTick(() => {
            //替换数据源
              this.$refs.treeMenu.setData(filterValue)
              const { faqId } = this.$route.query
              this.expKeys.push(faqId)
              this.ckKeys.push(faqId)
            })
          }
        }
      })
    },
    setKey(res) {
      return res.map((v) => {
      //与上面递归一样，去除所有的children嵌套
        if (v.children) {
          this.setKey(v.children)
        }
      //将前端的类型名与后端传来的类型名进行一个统一
        v.title = v.typeName || v.title
        v.key = v.id
        v.value = v.id
        v.slots = { title: 'customTitle' }
        return v
      })
    },

3.刷新页面使原来展开的列表与高亮保持原样
树组件中，有defaultSelectedKeys和expandedKeys两个属性
在data(){}中将这两个属性用其他定义一下

// 展开节点
expandedKeys: this.expKeys,
// 默认选中的节点
defaultSelectedKeys: this.ckKeys || [],

将这两个属性传到使用树组件的父组件中
下面展示一些 内联代码片。

<i-tree ref="treeMenu" @selectTreeNode="selectTreeNode" :expKeys="expKeys" :ckKeys="ckKeys" :isFAQ="true"></i-tree>

data() {
    return {
      expKeys: [],
      ckKeys: [],
      data: {},
    }
  },
this.$nextTick(() => {
              this.$refs.treeMenu.setData(filterValue)
              const { faqId } = this.$route.query
              this.expKeys.push(faqId)
              this.ckKeys.push(faqId)
            })

如上面那个更换数据源里将faqId push进expKeys和ckKeys中，就可以使刷新页面后，页面仍然保持之前的展开方式和高亮

一点点小的记录。