> 文章列表 > element select改成成tree树状下拉

element select改成成tree树状下拉

element select改成成tree树状下拉

element select改成成tree树状下拉

<template><el-select class="jhx-formData-inputRow" ref="configSelect" v-model="orgName" filterable placeholder="请选择":filter-method="filterMethod" clear><el-option :label="orgValue.label" :value="orgValue.value" style="height: auto; display: none"></el-option><el-input placeholder="输入关键字进行过滤" style="width:92%;margin-left:3%;margin-top:10px" v-model="filterText"></el-input><el-tree ref="orgTree" :data="orgList" :props="orgDefaultProps" @node-click="handleorgDodeClick":filter-node-method="orgFilterNode" :default-expand-all="true"></el-tree></el-select>
</template>
export default{data(){return{filterText: '',orgName: '',orgList: [{name:'测试1',id:1,children:[]}],orgValue: {},orgDefaultProps: {children: "children",label: "name",},ruleForm: {orgId: ""},} },watch: {filterText(val) {console.log(val)this.$refs.orgTree.filter(val);}},methods:{// tree搜索orgFilterNode(value, data) {if (!value) return true;return data.codeName.indexOf(value) !== -1;},// 机构tree点击事件handleorgDodeClick(val) {let { id, name } = valthis.orgValue.label = namethis.orgValue.value = idthis.ruleForm.orgId = idthis.orgName = name// 点击数点击关闭tree下拉框this.$refs.configSelect.blur();},// 监听打开窗口给对应的数据赋值dialogOpen(){let orgList = this.treeToFlat(JSON.parse(JSON.stringify(this.orgList)))this.orgName = orgList.find(item => item.id=== this.ruleForm.orgId).namethis.orgValue = {label: orgList.find(item => item.id === this.ruleForm.orgId).name,value: orgList.find(item => item.id === this.ruleForm.orgId).id}},// 树形数据扁平化treeToFlat(data) {let ary = [];data.forEach((item) => {if (item.children) {ary.push(item);if (item.children.length > 0) {ary.push(...this.treeToFlat(item.children));}} else {ary.push(item);}delete item.children;});return ary;},}
}