element-ui tree树形控件单个选择节点

element-ui tree控件单个选择节点

element-ui tree怎么选择单个叶子节点的解决方案。实现的效果如下:
element-ui tree树形控件单个选择节点_第1张图片
废话不多说,上代码(如下图):

html:

js:

onChangeBlur () {
      this.showHierarchy = !this.showHierarchy;
      if (this.showHierarchy) { // true 是展开 tree选择项
        this.$nextTick(function () {
          this.$refs.tree.setCurrentKey(this.bbb)
        })
      }
    },
    handleNodeClick(data) {
      this.aaa = data.label;// 当前选中的名称
      this.bbb = data.id; // 当前选中id
      this.showHierarchy = false;
    }

数据结构:

 data2: [
        { // 编辑新增 tree
        id: 1,
        label: '一级 1',
        children: [{
          id: 11,
          label: '二级 1-1',
          children: [{
            id:111,
            label: '三级 1-1-1'
          }]
        }]
      }, {
        id: 2,
        label: '一级 2',
        children: [{
          id: 21,
          label: '二级 2-1',
          children: [{
            id: 211,
            label: '三级 2-1-1'
          }]
        }, {
          id: 22,
          label: '二级 2-2',
          children: [{
            id:221,
            label: '三级 2-2-1'
          }]
        }]
      }, {
        id: 3,
        label: '一级 3',
        children: [{
          id:31,
          label: '二级 3-1',
          children: [{
            id:311,
            label: '三级 3-1-1'
          }]
        }, {
          id:32,
          label: '二级 3-2',
          children: [{
            id:321,
            label: '三级 3-2-1'
          }]
        }]
      }]

整体代码就是这样了,有遇到和我一样问题的小伙伴可以参考哦~

你可能感兴趣的:(element-ui)