element-ui之el-select下拉选择器树形选择器的使用方法

element-ui之el-select下拉选择器树形选择器的使用方法，由于官方案例比较麻烦，而且说明也比较少，新手拿来还要研究一下，我用完后直接给简化了，复制去直接可以用，吧字段含义简单阐述一下，直接上代码吧

HTML代码

<el-select clearable ref="selectTree" v-model="value" placeholder="请选择" popper-class="popperTreeSelect">
    <el-option :value="value" :label="value">
      <el-tree 
        ref="tree" 
        :data="data" 
        default-expand-all
        :props="defaultProps" 
        @node-click="handleNodeClick"
      >
        <span class="custom-tree-node" slot-scope="{ node, data }">
            <span>{{ node.label }}</span>
        </span>
      </el-tree>
    </el-option>
  </el-select>
</template>

defaultProps：默认参数配置，children参数，你子集的参数名，比如你后台返回的子集是child，那这个参数值就写child，label参数，当前层级绑定的唯一值，案例上绑的是label，我们开发一般是绑id，这个根据自己的参数来定
node.label，下拉选项显示的内容，一般开发中就是name,也就是案例中的label值
最后说一下handleNodeClick方法，this.value就是显示选中的值，这里和单选下拉不一样，绑定的不是id,其实可以理解为下拉是模拟的，选中后选中值需要我们自己去存一下，页面中只是显示了选中的名称，id并没有记录，所以这里的value是字符串，初始化默认值直接给文字就行，例如’三级 1-1-1’,这样， this.$refs.selectTree.blur();这里其实就是一个选择事件，不用管，
下面是我自己修改后的方法，仅供产考：我这里的需求是如果有下级单位，就必须选择到最后一级，所以加了一个判断if (data.child.length > 0) return;如果你们的需求是任何一级都可以选择，把这个去掉即可

handleNodeClick(data, node, b) {
      if (data.child.length > 0) return;
      this.form.selectName = data.name;
      this.form.selectId = data.id;
      this.value = data.name;
      this.$refs.selectTree.blur();
    },

js代码

 export default {
    data() {
      return {
        data: [{
          label: '一级 1',
          orgType: '1',
          children: [{
            label: '二级 1-1二级 1-1二级 1-1二级 1-1二级 1-1二级 1-1二级 1-1二级 1-1二级 1-1二级 1-1二级 1-1二级 1-1二级 1-1二级 1-1二级 1-1二级 1-1',
            orgType: '2',
            children: [{
              orgType: '3',
              label: '三级 1-1-1'
            }]
          }]
        }, {
          label: '一级 2',
          orgType: '1',
          children: [{
            orgType: '2',
            label: '二级 2-1',
            children: [{
              orgType: '3',
              label: '三级 2-1-1'
            }]
          }, {
            label: '二级 2-2',
            orgType: '2',
            children: [{
              orgType: '3',
              label: '三级 2-2-1'
            }]
          }]
        }],
        defaultProps: {
          children: 'children',
          label: 'label'
        },
        value: ''
      }
    },
    methods: {
      handleNodeClick(data,node,b) {
        this.value = data.label;
        this.$refs.selectTree.blur();
        console.log(data);
        console.log(node);
        console.log(b);
        console.log('dddddddd', this.$refs.tree.getCheckedNodes());
      }
    }
  }
 

如果有什么不懂得，欢迎在下面留言，本意是记录一下自己以后用的时候方便找，如果可以帮到大家就更好了！你学废了吗？