element ui 樹狀結構下拉框
阿新 • • 發佈:2021-01-11
技術標籤:# vue
配置選項:此處定義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>