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

• 引入数据

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 = "";
      }
    }