vue+element 超级简单联级菜单教程

最新推荐文章于 2022-11-23 17:41:10 发布

WJC_KLXS

最新推荐文章于 2022-11-23 17:41:10 发布

阅读量276

点赞数

文章标签： vue.js javascript

本文链接：https://blog.youkuaiyun.com/weixin_54482946/article/details/120851537

版权

本文介绍了如何使用Vue.js实现一个包含省市区三级联动的地址选择组件，通过`v-model`双向绑定和`@change`事件监听器，实现实时地址更新。关键步骤包括引入数据文件、HTML结构的el-select组件配置，以及JavaScript中地址联动逻辑的处理。

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

引入数据

import provinces from "@/json/address/provinces_cn.json";
import cities from "@/json/address/cities_cn.json";
import areas from "@/json/address/areas_cn.json";

html部分

        <div class="HealthRecords_box box3">
          <el-form-item
            label="现居住地址："
            prop="residence"
            label-width="120px"
          >
            <el-select
              @change="address"
              v-model="form1.provinces"
              placeholder="请选择"
            >
              <el-option
                :label="res.name"
                :value="res.code"
                v-for="(res, index) in provinces"
                :key="index + 'a'"
              />
            </el-select>
            <el-select
              @change="address"
              v-model="form1.cities"
              placeholder="请选择"
            >
              <el-option
                :label="res.name"
                :value="res.code"
                v-for="(res, index) in cities.filter(
                  val => val.parent_code == form1.provinces
                )"
                :key="index + 'b'"
              />
            </el-select>
            <el-select
              v-model="form1.areas"
              @change="$forceUpdate()"
              placeholder="请选择"
            >
              <el-option
                :label="res.name"
                :value="res.code"
                v-for="(res, index) in areas.filter(
                  val => val.parent_code == form1.cities
                )"
                :key="index + 'c'"
                :clearable="true"
              />
            </el-select>
            <el-input
              style="width:50%"
              v-model="form1.residence"
              autocomplete="off"
            />
          </el-form-item>
        </div>

js部分

    // 地址选择值变化
    address(val) {
      // 解决清空后选择框无法选择 强制刷新
      this.$forceUpdate();
      if (+val < 100) {
        this.form1.cities = "";
        this.form1.areas = "";
      } else {
        this.form1.areas = "";
      }
    }