<template>
  <div>
    <el-input v-model="input"
              style="width:200px"
              placeholder="請輸入內(nèi)容"></el-input>

    <el-button type="primary">添加節(jié)點(diǎn)</el-button>

    <span>當(dāng)前目錄:</span>

    <span>當(dāng)前目錄的父級目錄:</span>

    <el-tree :data="data"
             :props="defaultProps"
             accordion
             @node-click="handleNodeClick"></el-tree>
  </div>
</template>
<script>
export default {
    data() {
    return {
      input: '',
      data: [{
        label: '圖片空間',
        children: [{
          label: '蔬菜',
          children: [{
            label: '菠菜',
          },
          {
            label: '生菜',
          },
          ],
        },
        {
          label: '水果',
          children: [{
            label: '香蕉',
          }],
        },
        {
          label: '美女',
          children: [{
            label: '秦嵐',
          }],
        }],
      }],
      defaultProps: {
        children: 'children',
        label: 'label',
      },
    };
  },
  methods: {
    handleNodeClick(data) {
      console.log(data);
    },
  },
};
</script>

// 為了節(jié)省篇幅，省略template中的代碼，文末會貼出整體代碼
methods: {
    // 點(diǎn)擊節(jié)點(diǎn)
    handleNodeClick(nodes, node, self) {
      this.nowClickNode = node;
    },
    // 添加節(jié)點(diǎn)
    addSort() {
      const data = {
        label: '草莓',
      };
      this.$refs.tree.append(data, this.nowClickNode);
    },
  },

//template
<el-button type="primary"
           :disabled='isDisabled'
           @click='addSort'>添加節(jié)點(diǎn)</el-button>
//js
computed: {
    // 是否可以新建分類
    isDisabled() {
      if (this.nowClickNode.level > 2) {
        return true;
      }
      return false;
    },
  },

// 點(diǎn)擊節(jié)點(diǎn)的時(shí)候觸發(fā)事件
handleNodeClick(nodes, node, self) {
  this.nowClickNode = node;
  this.nowPathArr = [];
  // 如果不是根節(jié)點(diǎn)
  if (node.parent.parent) {
    this.faterName = node.parent.data.label;
    // 遞歸找路徑
    this.findParentName(node);
    // 拼接路徑
    this.nowPath = `圖片空間 / ${this.nowPathArr.join(' / ')}`;
  } else {
  // 如果是根節(jié)點(diǎn) 直接賦值
    this.nowPath = '圖片空間';
    this.faterName = '- -';
  }
},

// 查找父節(jié)點(diǎn)的分類名稱
findParentName(node) {
  if (node.parent.parent) {
    this.nowPathArr.unshift(node.data.label);
    this.findParentName(node.parent);
  }
},

//template
<el-tree 
     :data="treeData"  //數(shù)據(jù)源
     :props="defaultProps"  //配置項(xiàng)
     accordion //每次打開一個(gè)節(jié)點(diǎn) 手風(fēng)琴模式
     ref="tree" //用來獲取dom
     lazy  //節(jié)點(diǎn)懶加載
     :highlight-current='true' //高亮當(dāng)前節(jié)點(diǎn)
     :load='treeLoad' //懶加載時(shí)調(diào)用的方法
     node-key="cateId" //唯一標(biāo)識
     :default-expanded-keys='defaultOpen'  //默認(rèn)打開的節(jié)點(diǎn)數(shù)組
     :expand-on-click-node='true' //是否在點(diǎn)擊節(jié)點(diǎn)的時(shí)候展開或者收縮節(jié)點(diǎn)， 默認(rèn)值為 true，如果為 false，則只有點(diǎn)箭頭圖標(biāo)的時(shí)候才會展開或者收縮節(jié)點(diǎn)。
     @node-click="handleNodeClick" //點(diǎn)擊節(jié)點(diǎn)的回調(diào)函數(shù)
     >
</el-tree>

//js
// 加載樹形結(jié)構(gòu)  就是上面懶加載綁定的函數(shù)
treeLoad(node, resolve) {
  // 判斷節(jié)點(diǎn)等級
  if (node.level == 0) {
    // 如果是根節(jié)點(diǎn),添加一個(gè)固定的圖片空間節(jié)點(diǎn) 這是實(shí)現(xiàn)需求三
    resolve([{
      cateName: '圖片空間',
      cateId: '0',
      children: [],
    }]);
  }
  // 不是根節(jié)點(diǎn),調(diào)取接口加載列表 這里實(shí)現(xiàn)需求四，五的樹結(jié)構(gòu)懶加載，點(diǎn)完一級請求一級的數(shù)據(jù)
  if (node.level >= 1) {
    this.getCategoryListNew(node, resolve);
    // 防止子節(jié)點(diǎn)為空時(shí)一直出現(xiàn)加載動畫
    return resolve([]);
  }
},

// 獲取樹形結(jié)構(gòu)  上面掉用的請求接口 data處理完之后要調(diào)用resolve方法
getCategoryListNew(node, resolve) {
  Service.getCategoryListNew({ parentId: node.data.cateId }).then(({ data }) => {
      resolve(data);
  }).catch((e) => {
    console.log(e);
  });
},

.tree-box{
  width: 200px;
  height: calc(100% - 30px);
  overflow:auto;
}
.el-tree {
  display: inline-block;
  min-width: 100%;
}

// 通過節(jié)點(diǎn)id找到對應(yīng)樹節(jié)點(diǎn)對象
const node = this.$refs.tree.getNode(this.nodeId);
// 把loaded手動置為false,也就是告訴tree這個(gè)節(jié)點(diǎn)沒有加載過
node.loaded = false;
// 主動調(diào)用展開節(jié)點(diǎn)方法，重新查詢該節(jié)點(diǎn)下的所有子節(jié)點(diǎn)
node.expand();

// 選取dom
const root = document.querySelector('.el-tree-node__children');
// 找到目標(biāo)節(jié)點(diǎn)
const firstNode = root.firstChild;
// 模擬點(diǎn)擊
firstNode.click();