el-tree 展开指定层级 节点

示例：只展开一级节点

 

 代码实现：

element UI 文档

 html代码

defaultExpandedArr 是重点 需要加node-key

js代码

export default {
  data() {
    return {
      defaultProps: {
        children: "children",
        label: "label",
      },
      treeData: [],
      defaultExpandedArr: [],
    };
  },
  mounted() {
    // 相当于请求接口
    this.init();
  },
  methods: {
    init() {
      // 获取到接口数据 之后赋值
      this.treeData = [
        {
          id: 1,
          label: "一级 1",
          children: [
            {
              id: 4,
              label: "二级 1-1",
              children: [
                {
                  id: 9,
                  label: "三级 1-1-1",
                },
                {
                  id: 10,
                  label: "三级 1-1-2",
                },
              ],
            },
          ],
        },
        {
          id: 2,
          label: "一级 2",
          children: [
            {
              id: 5,
              label: "二级 2-1",
            },
            {
              id: 6,
              label: "二级 2-2",
            },
          ],
        },
        {
          id: 3,
          label: "一级 3",
          children: [
            {
              id: 7,
              label: "二级 3-1",
            },
            {
              id: 8,
              label: "二级 3-2",
            },
          ],
        },
      ];
      // 给 你想展开的数据 进行 push 到 defaultExpandedArr内
      // 我这个展示的是一级的展开 在想往下级 可以继续循环嵌套之后循环children 进行push
      this.treeData.forEach((item) => {
        this.defaultExpandedArr.push(item.id);
      });
    },
  },
};