elementui下拉树形结构【完美实现】

转载

mob60475700baf7 2021-07-25 16:58:00

在用 elementui 开发项目的时候，在进行下拉选择的时候，由于下拉的选项中，存在‘父’‘子’上下级的关系，所以想用下拉树来解决。

通过百度 elementui 下拉树，有很多版本，但是总会有一些问题。最终自己写了一个，能够完美实现下拉树的功能。

废话少说，上代码：

<template>
  <div class="app-container">
    <el-select class="main-select-tree" ref="selectTree" v-model="value"  style="width: 560px;">
      <el-option v-for="item in formatData(datas)" :key="item.value" :label="item.label" :value="item.value" style="display: none;" />      
      <el-tree class="main-select-el-tree" ref="selecteltree" 
        :data="datas"
        node-key="id" 
        highlight-current  
        :props="defaultProps"
        @node-click="handleNodeClick"
        :current-node-key="value"
        :expand-on-click-node="expandOnClickNode"
        default-expand-all />
    </el-select>
  </div>
</template>

<script>
export default {
  data() {
    return {
      value: 6,
      expandOnClickNode: true,
      options:[],
      datas: [{
        id: 1,
        label: '云南',
        children: [{
          id: 2,
          label: '昆明',
          children: [
            {id: 3,label: '五华区',children:[{id: 8,label: '北辰小区'}]},
            {id: 4,label: '盘龙区'}
          ]
        }]
      }, {
        id: 5,
        label: '湖南',
        children: [
          {id: 6,label: '长沙'},
          {id: 7,label: '永州'}
        ]
      }],
      defaultProps: {
        children: 'children',
        label: 'label'
      }
    }
  },
  methods: {
    // 四级菜单
    formatData(data){
      let options = [];
      data.forEach((item,key) => {
        options.push({label:item.label,value:item.id});
        if(item.children){
          item.children.forEach((items,keys) => {
            options.push({label:items.label,value:items.id});
            if(items.children){
              items.children.forEach((itemss,keyss) => {
                options.push({label:itemss.label,value:itemss.id});
                if(itemss.children){
                  itemss.children.forEach((itemsss,keysss) => {
                    options.push({label:itemsss.label,value:itemsss.id});
                  });
                }
              });
            }
          });
        }
      });
      return options;
    },
    handleNodeClick(node){
      this.value = node.id;
      this.$refs.selectTree.blur();
    }
  }
}
</script>
<style>
.main-select-el-tree .el-tree-node .is-current > .el-tree-node__content{font-weight: bold; color: #409eff;}
.main-select-el-tree .el-tree-node.is-current > .el-tree-node__content{font-weight: bold; color: #409eff;}
</style>