vue省市区下拉框实现

1.效果如图

选中省之后，再选择对应的市，再选择对应的区

数据源js文件：

码云：https://gitee.com/wyjpositive/mybatis-plus-demo/tree/master/src/main/resources/static

我是把里面的json文件改成js引入对应的项目的中

上代码：

①：引入省市区js

import jsonData from '@/assets/js/china_address.js'

②：编写省市区的下拉框

 <el-form-item label="所在地区"><el-select v-model="valueProvince"placeholder="请选择省"@change="changeProvince"style="width:120px"><el-optionv-for="item in provinceList":key="item.value":label="item.label":value="item.value"></el-option></el-select><el-select v-model="valueCity"placeholder="请选择市"@change="changeCity"style="width:120px"><el-optionv-for="item in cityOptions":key="item.value":label="item.label":value="item.value"></el-option></el-select><el-select v-model="valueOrigin"placeholder="请选择区"@change="changeOrigin" style="width:120px"><el-optionv-for="item in originOptions":key="item.value":label="item.label":value="item.value"></el-option></el-select></el-form-item>

③：定义下拉框所需要数据

export default {components: {UploadImage},data() {return {provinceList: [], // 省列表cityList: [], // 市列表originList: [], // 区列表valueProvince: '', // 所选的省valueCity: '', // 所选的市valueOrigin: '', // 所选的区cityOptions: [], // 市下拉框数据originOptions: [],// 区下拉框数据}},}

④：编写js

  created() {this.getList()this._getJsonData()//console.log('jsonData:',jsonData)},methods: {// 选择省changeProvince(val) {this.provinceList.forEach((province, index) => {debuggerif (val.toString() === this.provinceList[index].value) {this.cityOptions = this.provinceList[index].childrenthis.valueCity = ''this.originOptions = this.provinceList[index].children[0].childrenthis.valueCity = ''this.valueOrigin = ''// 如果选中省之后想市区默认选中// this.valueCity = this.provinceList[index].children[0].value// this.valueOrigin = this.provinceList[index].children[0].children[0].value}})},// 选择市changeCity(val) {this.cityList.forEach((city, index) => {if (val.toString() === this.cityList[index].value) {this.originOptions = this.cityList[index].childrenthis.valueOrigin = ''//如果选中市之后默认区选中// this.valueOrigin = this.cityList[index].children[0].value}})},// 选择区changeOrigin(val) {this.valueOrigin = val},// 初始化省市区数据_getJsonData() {console.log('res =======>'+jsonData)this.provinceList = []this.cityList = []this.originList = []jsonData.data.forEach((item) => {if (item.value.match(/0000$/)) {this.provinceList.push({value: item.value,label: item.name,children: []})} else if (item.value.match(/00$/)) {this.cityList.push({value: item.value,label: item.name,children: []})} else {this.originList.push({value: item.value,label: item.name})}})for (let index in this.provinceList) {for (let index1 in this.cityList) {if (this.provinceList[index].value.slice(0, 2) === this.cityList[index1].value.slice(0, 2)) {this.provinceList[index].children.push(this.cityList[index1])}}}for(let item1 in this.cityList) {for(let item2 in this.originList) {if (this.originList[item2].value.slice(0, 4) === this.cityList[item1].value.slice(0, 4)) {this.cityList[item1].children.push(this.originList[item2])}}}},},

地址的js中有部分不是简称。比如广西壮族自治区指广西省，有需要的自行修改

vue省市区下拉框实现相关推荐

Vue封装下拉框组件时，为document绑定原生事件addEventlistener(click“)，切换页面之后事件还未被摧毁...
1 <script> 2 export default { 3 props: ["lists"], 4 data() { 5 return { 6 isactive: ...
vue项目下拉框内容过长做一个滚动条的效果
vue项目下拉框内容过长做一个滚动条的效果如下图: 关键代码如下:
Vue element 下拉框可输入可选择(无bug)
背景: 需要一个可填可选的下拉框当用户自定义输入时,自动添加"(其他)"后缀效果如下: <el-select v-model="value"place ...
element做树形下拉_一个基于 elementUi的vue树形下拉框组件
# wl-vue-select,wl-tree-selectcss # 简介vue 用于vue框架的树形下拉框及带全选的普通下拉框. node Tree drop-down box for vue ...
vue element 下拉框内容过长显示...鼠标悬浮显示全部
1.1. css 多选下拉框内容过长-用...代替 /*下拉选择框-多选-内容过长-用...代替 begin */ .el-tag.el-tag--info {background-color: ...
vue+element下拉框实现二级联动
参考文章:https://blog.csdn.net/qq_42341025/article/details/86601093 <el-form-item label-width="8 ...
vue可视化拖拽组件模板,vue自定义下拉框组件
怎样利用Vue动态生成form表单 . $formCreate参数rules 表单生成规则[inputRule,selectRule,...]options 初始化配置参数(详细见底部createOp ...
vue 选择下拉框选项更改触发事件
这种情况下,可以使用change事件,当选中某一选项后,便会触发该事件.完整代码: <!DOCTYPE html> <html lang="en"> < ...
Vue联动下拉框默认选中
控制器里: <?php namespace app\index\controller; use think\Controller; use think\Db; class Index exten ...

vue省市区下拉框实现

vue省市区下拉框实现

vue省市区下拉框实现相关推荐

最新文章

热门文章

vue省市区 下拉框实现

vue省市区 下拉框实现

vue省市区 下拉框实现相关推荐

最新文章

热门文章

vue省市区下拉框实现

vue省市区下拉框实现

vue省市区下拉框实现相关推荐