element ui 树状结构下拉框

Bertha 。 2021-07-27 01:05 802阅读 0赞

配置选项:此处定义el-tree的label和children为指定属性，  如果不定义取默认，即label和children

<template>
      <div>
        <el-form>
          <el-form-item>
            <el-select size="small" v-model="dictDataSelect" placeholder="请选择" ref="selectReport">
              <el-option :value="dictDataSelect" :label="dictDataSelect" style="height: auto">
                <el-tree
                  :data="orgTree"
                  :props="treeProps"
                  :render-after-expand="true"
                  :expand-on-click-node="false"
                  @node-click="handleNodeClick"
                ></el-tree>
              </el-option>
            </el-select>
          </el-form-item>
        </el-form>
    
      </div>
    </template>
    
    <script>
      export default {
        data() {
          return {
            dictDataSelect: "",
            treeProps: {   //配置选项:此处定义el-tree的label和children为指定属性，  如果不定义取默认，即label和children
              value: 'id',
              children: 'children',
              label: 'orgFullName'
            },
            orgTree: [
              {
                "id": "1290913",
                "orgCode": "67",
                "orgFullName": "大陆区",
                "orgShortName": "大陆",
                "orgFullNameEn": "dl",
                "orgShortNameEn": "dl",
                "parentOrgCode": "-1",
                "tenantId": "mg",
                "children": [
                  {
                    "id": "129091",
                    "orgCode": "89",
                    "orgFullName": "上海区",
                    "orgShortName": "上海",
                    "orgFullNameEn": "shanghai",
                    "orgShortNameEn": "sh",
                    "parentOrgCode": "67",
                    "tenantId": "mg",
                    "children": [
                      {
                        "id": "1290914",
                        "orgCode": "32",
                        "orgFullName": "黄浦区",
                        "orgShortName": "黄埔",
                        "orgFullNameEn": "hpq",
                        "orgShortNameEn": "hu",
                        "parentOrgCode": "89",
                        "tenantId": "mg",
                        "children": [
                          {
                            "id": "1290915",
                            "orgCode": "45",
                            "orgFullName": "新城街道",
                            "orgShortName": "XCJD",
                            "orgFullNameEn": "XC",
                            "orgShortNameEn": "C",
                            "parentOrgCode": "32",
                            "tenantId": "mg",
                            "children": null
                          }
                        ]
                      }
                    ]
                  }
                ]
              }
            ],
          }
        },
        methods: {
          handleNodeClick:function(node){
            this.dictDataSelect = node.orgFullName;
            if(node.id != 0){
              //this.AccountData.orgId = node.id;
            }
            this.$refs.selectReport.blur()
          },
        },
        mounted: function() {}
      }
    </script>
    
    <style scoped>
    
    </style>

![20201230143221814.png][]

[20201230143221814.png]: /images/20210726/ac90d014541d4a9d95be80bd8cacc430.png