elementui 下拉框实现省市区

资深Bug开发大师

已于 2024-06-03 13:45:53 修改

阅读量1k

点赞数 1

文章标签： elementui 前端 javascript

于 2024-06-03 13:44:53 首次发布

本文链接：https://blog.youkuaiyun.com/m0_65351601/article/details/123890724

版权

elementui 下拉框实现省市区

使用官方element下拉组件实现省市区三级联调

1.select组件

 <el-select v-model="province" placeholder="请选择省">
            <el-option
              v-for="item in Area"
              :key="item.value"
              :label="item.label"
              :value="item"
            >
            </el-option>
  </el-select>
 <el-select v-model="city" placeholder="请选择市">
            <el-option
              v-for="item in cityQuery"
              :key="item.value"
              :label="item.label"
              :value="item"
            >
            </el-option>
 </el-select>
 <el-select v-model="area" placeholder="请选择区">
            <el-option
              v-for="item in areaQuery"
              :key="item.value"
              :label="item.label"
              :value="item"
            >
            </el-option>
 </el-select>

2.data中

  Area: [],
  cityQuery: [],
  areaQuery: [],
  province: "",
  city: "",
  area: "",

3.监听下拉选择的变化

 watch: {
    // 监听省级
    province: function (newValue) {
      (this.cityQuery = []),
        (this.areaQuery = []),
        (this.shi = ""),
        (this.qu = "");
      this.Area.forEach((item) => {
        if (newValue.label === item.label) {
          this.cityQuery = item.children;
          console.log("city", this.cityQuery);
        }
      });
    },
    // 监听市级
    city: function (newValue) {
      (this.areaQuery = []), (this.area = "");
      this.cityQuery.forEach((item) => {
        if (newValue.label === item.label) {
          this.areaQuery = item.children;
          console.log("area", this.areaQuery);
        }
      });
    },
  },

4.添加地区文件

mounted() {
    this.Area = require("./city.json"); 
  },

这里是城市文件添加链接描述