vue项目中，封装个省市区的组件

后端返回的数据就是正常的对象，不是树状。

<template>
  <div>
    <!-- 省 -->
    <el-form-item label-width="60px">
      <el-select v-model="province_id" placeholder="请选择省份" clearable>
        <el-option
          v-for="item in sele"
          :key="item.id"
          :label="item.name"
          :value="item.id"
        >
        </el-option>
      </el-select>
    </el-form-item>
    <!-- 市 -->
    <el-form-item label-width="60px">
      <el-select v-model="city_id" placeholder="请选择城市" clearable>
        <el-option
          v-for="s in si"
          :key="s.id"
          :label="s.name"
          :value="s.id"
        >
        </el-option>
      </el-select>
    </el-form-item>
    <!-- 区 -->
    <el-form-item label-width="60px">
      <el-select v-model="district_id" placeholder="请选择区" clearable>
        <el-option
          v-for="q in qu"
          :key="q.id"
          :label="q.name"
          :value="q.id"
        >
        </el-option>
      </el-select>
    </el-form-item>
  </div>
</template>

<script>
export default {
  name: "zj",
  computed: {
  //拿vuex中的数据
    showuinof() {
      return this.$store.state.info;
    }
  },
  data() {
    return {
      province_id: 1,
      city_id: 2,
      district_id: 3,
      sele: [],
      si: [],
      qu: [],
      optionProps: {
        value: "id",
        label: "name",
        children: "sub"
      },
      allArea: []
    };
  },
  //监听做到联动效果
  watch: {
    province_id(val) {
    //把值传给父组件
      this.$emit("province_id", this.province_id);
      this.selectProvince();
    },
    city_id(val) {
      this.selectCity();
      //把值传给父组件
      this.$emit("city_id", this.city_id);
    },
    district_id(a) {
    //把值传给父组件
      this.$emit("district_id", this.district_id);
    }
  },

  methods: {
    selectProvince() {
      this.si = this.allArea.filter(a => {
        return a.level == 1 && a.pid == this.province_id;
      });
      this.city_id = this.si[0].id;
    },
    selectCity() {
      this.qu = this.allArea.filter(a => {
        if (a.level == 2 && a.name && a.pid == this.city_id) {
          return a;
        }
        // return a.level == 2 && a.pid == this.city_id;
      });
      if (this.qu.length > 0) {
        this.district_id = this.qu[0].id;
        this.$emit("district_id", this.district_id);
      }
    },

    queryinfo() {
    //判断vuex里有没有数据，有就直接用，没有就请求，也可以不放到vuex，考虑性能放
      if (this.showuinof.length > 0) {
        this.allArea = this.showuinof;
        this.gggg();
      } else {
        this.$http.post("?s=Manage.Index.Area", {}).then(res => {
          console.log(res.data.data, "省市区数据");

          if (res.data.code == 200) {
            this.$store.commit("area", res.data.data);
            this.allArea = res.data.data;

            this.gggg();
          }
        });
      }
    },
    gggg() {
    //把省市区分别过滤出来
      this.sele = this.allArea.filter(a => {
        return a.level == 0;
      });

      this.si = this.allArea.filter(a => {
        return a.level == 1 && a.pid == 1;
      });
      console.log(this.si, "这是si");
      this.qu = this.allArea.filter(a => {
        return a.level == 2;
      });
      console.log(this.qu, "这是qu");
      //这个是别的组件需要用到的，可以忽略
      this.$emit("all", this.allArea);
    },
  },
  created() {
    this.queryinfo();
  }
};
</script>

<style scoped></style>

vuex

export default new Vuex.Store({
  state: {
    info: []
  },
  mutations: {
    area(state, info) {
      state.info = info;
    }
  },
  actions: {},
  modules: {
    theme,
    user
  },
  getters
});

全局注册

import ssq from "@/components/ssq";
Vue.component("Mysle", ssq);

子组件

          <Mysle
            @province_id="province_id"
            @district_id="district_id"
            @city_id="city_id"
          ></Mysle>

export default {
  name: "DashboardWorkplace",
  data() {
    return {
      // 表格搜索条件
      where: {
        days: "0",
        province_id: 1,
        city_id: 2,
        district_id: 3
      },
    };
  },

  methods: {
    // 接收到子组件传来的值 并且赋值 搜索
    province_id(a) {
      this.where.province_id = a;
    },
    district_id(a) {
      this.where.district_id = a;
    },
    city_id(a) {
      this.where.city_id = a;
    },


};
</script>