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

最新推荐文章于 2024-05-16 02:53:35 发布

张大斌不会编程

最新推荐文章于 2024-05-16 02:53:35 发布

阅读量2.2k

点赞数 1

分类专栏：个人笔记文章标签： vue.js 前端 elementui

本文链接：https://blog.csdn.net/weixin_43527777/article/details/125309668

版权

个人笔记专栏收录该内容

1 篇文章 0 订阅

订阅专栏

全部代码

<template>
  <div style="float:left">
    <el-select v-model="big" placeholder="请选择一级单位" @change="getSecBumen(big)" style="width: 150px;">
      <el-option
          v-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-option
          v-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 = res
      this.bigTypes = this.filterByType(this.dataList);

    })
  },
  methods:{
    getSecBumen(id) {
      this.danwei = this.dataList[id-1].name
      this.middle = ''
      this.middleTypes = this.filterByID(this.dataList,id)
      this.$emit('child-firstdanwei',this.danwei);
    },
    getSecBumenName(id){
      this.secdanwei =  this.dataList[id-1].name
      this.$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)
    }