Vue+element ui表单中省市区级联选择—v

省市区级联选择—v"/>

Vue+element ui表单中省市区级联选择—v

v-distpicker组件或Cascader 级联选择器

1.页面

<el-form ref="form" :model="form" :rules="rules" label-width="100px">
    <el-row>
       <el-col :span="12">
          <el-form-item label="姓名" prop="name">
              <el-input v-model="form.name" placeholder="请输入姓名" />
          </el-form-item>
       </el-col>
       <el-col :span="12">
          <el-form-item label="联系电话" prop="telephone">
              <el-input
                v-model="form.telephone"
                placeholder="请输入联系电话"
                maxlength="11"
              />
          </el-form-item>
       </el-col>
       <el-col :span="12">
          <el-form-item label="所在地区" prop="district">
              <!--方式1:安装v-distpicker组件 使用 npm 安装:npm install v-distpicker --save-->
              <!-- <v-distpicker
                @selected="onSelected"
                :province="form.province"
                :city="form.city"
                :area="form.area"
              ></v-distpicker> -->
              <!--方式2:使用cascader组件-->
              <el-cascader
                v-model="form.district"
                placeholder="请选择"
                :options="districtOptions"
                clearable
                filterable
                style="width: 100%"
                @change="onChange"
              ></el-cascader>
          </el-form-item>
       </el-col>
       <el-col :span="24">
          <el-form-item label="详细地址" prop="address">
              <el-input
                v-model="form.address"
                type="textarea"
                placeholder="请输入详细地址"
              />
          </el-form-item>
       </el-col>
     </el-row>
</el-form>

 2.js

<script>
import VDistpicker from "v-distpicker";//方式1 注册v-distpicker组件
import { getCascaderOptions } from '@/district/provinceCity';//方式2 导入provinceCity.js中的方法
export default {name: "District",components: { VDistpicker },data() {var checkPhone = (rule, value, callback) => {if (!value) {return callback(new Error("联系电话不能为空"));} else {const reg = /^1[3|4|5|7|8][0-9]\d{8}$/;if (reg.test(value)) {callback();} else {return callback(new Error("请输入正确的电话号码"));}}};return {// 弹出层标题title: "",//所在地区组件districtOptions: [],// 表单参数form: {},// 表单校验rules: {name: [{ required: true, message: "姓名不能为空", trigger: "blur" }],telephone: [{required: true,validator: checkPhone,trigger: "blur",},],district: [{ required: true, message: "所在地区不能为空", trigger: "blur" },],address: [{ required: true, message: "详细地址不能为空", trigger: "blur" },],},};},created() {//调用省市区数据放入数组中(方式2)this.districtOptions = getCascaderOptions();},methods: { //所属地区(方式1)// onSelected(data) {//   this.form.province = data.province.value;//   this.form.city = data.city.value;//   this.form.area = data.area.value;// },//所属地区(方式2)onChange(data) {this.form.province = this.form.district[0];this.form.city = this.form.district[1];this.form.area = this.form.district[2];},/** 修改按钮操作 *///handleUpdate(row) {//  getAddress(row.addressId).then((response) => {//将district合并到form中(方式2)//     this.form = {//      ...this.form,//     ...response.data,//      district: [//        response.data.province,//        response.data.city,//        response.data.area,//      ],//    };//    this.title = "修改";//  });//},},
};
</script>

3.省市区数据provinceCity.js文件(方式2)

省市区三级联动—provinceCity.js_js三级联动-Javascript文档类资源-CSDN下载