【Vue】iview tree组件如何能选中文字的时候展开当前列

Z时代
2024-01-10
分类：技术分享

回答

:on-select-change 点击树节点时触发当前已选中的节点数组

on-select-change="handleSelect"
methods:{
    handleSelect(selectedList){
        var ele = selectedList[selectedList.length-1] //当前选中的树节点
        ele.expand = true //设置为展开
    }}

你触发他on-check-change 也就是复选框事件的时候触发他的展开当先选中事件啊

<Tree ref="tree" :data="data" :load-data="loadData" @on-select-change="selectChange" show-checkbox/>

methods:{
  selectChange (selectedList) {
      // 获取当前节点
      const node = selectedList[selectedList.length - 1]
      if (node) {
        // 递归（后端逻辑是传父节点id，返回子节点列表）
        this._loadData(node.id, (response) => {
          // 没有子节点则返回
          if (!response) return
          let array = []
          // 遍历子节点，然后在各子节点上递归调用_loadData查询孙子、曾孙子...
          response.forEach((item) => {
            array.push(item)
            this._loadData(item.id, () => {})
          })
          // 挂载子节点
          node.children = array
          // 展开子节点树
          node.expand = true
        })
      }
    }
},
mounted () {
    this._loadData(this.id, (array) => {
        this.data = array
    })}