VUE前端二级部门联动下拉菜单

全部代码

<template><div style="float:left"><el-select v-model="big" placeholder="请选择一级单位" @change="getSecBumen(big)" style="width: 150px;"><el-optionv-for="item in bigTypes":key="item.name":label="item.name":value="item.id"clear></el-option></el-select><el-select v-model="middle" placeholder="请选择二级单位" @change="getSecBumenName(middle)" class="ml-5" style="width: 150px;"><el-optionv-for="item in middleTypes":key="item.name":label="item.name":value="item.id"></el-option></el-select></div></template><script>export default {name: "bumen",data() {return {danwei:'',secdanwei:'',big: '',bigTypes: [],middle: '',middleTypes: [],dataList: [],}},created() {this.request.get("/bumen").then(res =>{this.dataList = resthis.bigTypes = this.filterByType(this.dataList);})},methods:{getSecBumen(id) {this.danwei = this.dataList[id-1].namethis.middle = ''this.middleTypes = this.filterByID(this.dataList,id)this.$emit('child-firstdanwei',this.danwei);},getSecBumenName(id){this.secdanwei = this.dataList[id-1].namethis.$emit('child-secdanwei',this.secdanwei);},filterByType(aim) {return aim.filter(item => item.categoryType == 'BIG')},filterByID(aim,id) {return aim.filter(item => item.parentId == id)},reset(){this.big = ''this.middle = ''}}}</script>

filter过滤器实现单位筛选

filterByType(aim) {return aim.filter(item => item.categoryType == 'BIG')},filterByID(aim,id) {return aim.filter(item => item.parentId == id)}