Vue+elemenUI 省市区三级联动

最新推荐文章于 2024-01-20 10:35:25 发布

java小白_hak

最新推荐文章于 2024-01-20 10:35:25 发布

阅读量200

点赞数 2

分类专栏： vue 文章标签： vue.js json

本文链接：https://blog.csdn.net/Platinum_stars/article/details/107159946

版权

vue 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

<el-form-item label="省">
	<el-select v-model="form.province" @change="gengxin1">
    	<el-option v-for="item in address" :value="item.sheng">{{item.sheng}}</el-option>
    </el-select>
</el-form-item>
<el-form-item label="市">
    <el-select v-model="form.city" @change="gengxin2">
       <el-option v-for="item in citys" :value="item.shi">{{item.shi}}</el-option>
    </el-select>
</el-form-item>
<el-form-item label="县">
     <el-select v-model="form.county">
        <el-option v-for="item in countys" :value="item">{{item}}</el-option>
     </el-select>
</el-form-item>

import address from '@/assets/json/address'//建议放在assets文件夹下 | address.json(下面有链接)

data() {
  return {
    address: address,
    citys: [],
    countys: []
  }
}

gengxin1() {
  const _this = this
  _this.address.forEach(function(item,index) {
    if (item.sheng === _this.form.province) {
      _this.citys = item.city
    }
  })
  _this.form.city = _this.citys[0].shi
  this.gengxin2()
},
gengxin2() {
  const _this = this
  _this.citys.forEach(function(item,index) {
    if (item.shi === _this.form.city) {
      _this.countys = item.qx
    }
  })
  _this.form.county = _this.countys[0]
}