element-ui中tree形控件節(jié)點默認展開的動態(tài)設置

業(yè)務需求

模糊搜索時聚凹，需要tree展開搜索的節(jié)點，如下圖所示

Snipaste_2023-01-06_10-03-11.png

Snipaste_2023-01-06_10-05-07.png

實現(xiàn)

tree組件中的default-expand-all屬性控制是否默認展開所有節(jié)點功茴，因tree組件中節(jié)點太多，該屬性并不能直接設置為true孽亲，我給了一個默認為false的變量openShow坎穿，data中定義false

<el-tree
        :default-expand-all="openShow"
        :lazy="isLazy"
        :load="loadNode"
        id="my-tree"
        ref="tree"
        class="tree-view structure-tree scroll-bar"
        :data="treeData"
        node-key="treeId"
        highlight-current
        :props="defaultProps"
        @node-click="handleNodeClick"
        :auto-expand-parent="true"
        :expand-on-click-node="false"
      ></el-tree>

本人項目中使用了lazy懶加載，當需要模糊搜索展開時返劲，不需要懶加載玲昧，所以同理給了lazy屬性默認為true的變量isLazy，data中定義為true

本人搜索采用了el-select下拉框旭等，在watch中監(jiān)聽el-select下拉框

searchValue(val) {
      if (val) {
        this.choiceHouse(val);
      } else {
        this.treeData = [
          {
            treeName: "鄞州區(qū)",
            id: 1,
            treeId: 1,
            treeType: 0,
            children: [],
            isChildren: false,
          },
        ];
        this.openShow = false
        this.isLazy = true
      }
    },

this.choiceHouse(val)是獲取搜索的節(jié)點的路徑酌呆，在該方法中，設置

 this.openShow = true
 this.isLazy = false

通過以上代碼搔耕，會發(fā)現(xiàn)搜索后隙袁，default-expand-all 屬性為true，tree節(jié)點并不會默認展開

222.png

此時需要使用key去處理樹的重載弃榨，給tree添加key屬性菩收，data中定義為 ""

<el-tree
        :key="treeKey"
        :default-expand-all="openShow"
        :lazy="isLazy"
        :load="loadNode"
        id="my-tree"
        ref="tree"
        class="tree-view structure-tree scroll-bar"
        :data="treeData"
        node-key="treeId"
        highlight-current
        :props="defaultProps"
        @node-click="handleNodeClick"
        :auto-expand-parent="true"
        :expand-on-click-node="false"
      ></el-tree>

然后在watch監(jiān)聽中添加

this.treeKey = +new Date();

此時代碼如下：

searchValue(val) {
      if (val) {
        this.choiceHouse(val);
        // 使樹重新渲染
        this.treeKey = +new Date();
      } else {
        this.treeData = [
          {
            treeName: "鄞州區(qū)",
            id: 1,
            treeId: 1,
            treeType: 0,
            children: [],
            isChildren: false,
          },
        ];
        this.openShow = false
        this.isLazy = true
        // 使樹重新渲染
        this.treeKey = +new Date();
      }
    },

前端菜鳥發(fā)文，如果此文章對你有所幫助的話鲸睛，記得點個贊再走