elememt -tree组件实现树的懒加载、单选、互斥

引入 elememt 的 tree 组件，实现以下效果：

1、树的懒加载

2、父子节点不相互关联

3、可勾选，而且必须是单选，即互斥

4、节点超出显示省略号，鼠标移上去显示全部

如图： 

HTML代码：

    <el-tree
      :props="treeProps"
      :load="loadNode"
      lazy
      show-checkbox
      :check-strictly="true"
      :default-checked-keys="checkedKeys"
      node-key="id"
      ref="tree"
      highlight-current
      @check="getCheckedNodes"
      @check-change="getCurrentNode"
    >
        <template slot-scope="{ node, data }">
          <div class="custom-tree-node">
            <span class="node-title" :title="data.name">{{ data.name }}</span>
          </div>
        </template>
    </el-tree>

初始化：

  data() {
    return {
      treeProps: {
        label: "name",
        children: "zones",
        isLeaf: "isleaf"
      },

      // 是否勾选了节点
      checkedFlag: false,

      // 被勾选节点的id
      code: "",
      checkedKeys: []
    };
  },

逻辑代码：

  methods: {
    // 获取已选的节点
    getCheckedNodes(data, item) {
      if (this.checkedFlag) {
        // 通过 keys 设置目前勾选的节点
        this.$refs.tree.setCheckedKeys([this.code]);
      } else {
        this.$refs.tree.setCheckedKeys([]);
      }
    },

    // 获取当前被选择的节点
    getCurrentNode(data, check) {
      this.checkedFlag = check;
      this.code = data.code;
    },

    // 懒加载树
    loadNode(node, resolve) {
      if (node.level === 0) {
        // 如果展开第一级节点，从后台加载一级节点列表
        this.loadFirstNode(resolve);
      }
      if (node.level >= 1) {
        // 如果展开其他级节点，动态从后台加载下一级节点列表
        this.loadChildNode(node, resolve);
      }
    },

    // 加载第一级列表
    async loadFirstNode(resolve) {
      // 这里发送网络请求，获取后台返回的列表
      const { data } = await listApi("0");
      return resolve(data.list);
    },

    // 如果展开其他级节点，动态从后台加载下一级节点列表
    async loadChildNode(node, resolve) {
      let { level, code } = node.data;
      // 这里发送网络请求，获取后台返回的列表
      const { data } = await listApi(level, code);
      return resolve(data.list);
    }
  }

样式：

.node-title {
  display: inline-block;
  width: 70%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  margin-left: 6px;
}