省市区组件优化

最新推荐文章于 2024-06-29 20:07:33 发布

名字还我

最新推荐文章于 2024-06-29 20:07:33 发布

阅读量789

点赞数 1

CC 4.0 BY-SA版权

分类专栏：工作日志文章标签： javascript 前端 vue.js

本文链接：https://blog.youkuaiyun.com/qq_54896898/article/details/121922136

工作日志专栏收录该内容

34 篇文章

订阅专栏

这是一个Vue.js组件实现的三级联动选择，用于选取省份、城市和区。组件包含三个`el-select`元素，分别对应省、市、区的选择，并通过`v-for`指令动态渲染选项。组件监听`province_id`、`city_id`和`district_id`的变更，根据父级选择更新子级选项。数据加载通过`$http.post`请求获取，同时使用 Vuex 存储和获取省市区数据。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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

<script>
export default {
  name: "zj",
  computed: {
    showuinof() {
      return this.$store.state.info;
    }
  },
  data() {
    return {
      dats: 0,
      province_id: 0,
      city_id: 0,
      district_id: 0,
      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 = 0;
    },
    selectCity() {
      if (this.city_id == 0) {
        this.qu = [];
        this.district_id = 0;
      } else {
        this.qu = this.allArea.filter(a => {
          if (a.level == 2 && a.name && a.pid == this.city_id) {
            return a;
          }
        });
        if (this.qu.length > 0) {
          this.district_id = 0;
          this.$emit("district_id", this.district_id);
        }
      }
    },
    queryinfo() {
      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.$emit("all", this.allArea);
    },

  },
  mounted() {
    this.$emit("dats", 0);
    this.queryinfo();
  }
};
</script>

<style scoped></style>