vue省城县三级联动实现以及通过element-ui表单提交name参数
作者:神秘网友
发布时间:2020-09-05 02:21:38
vue省城县三级联动实现以及通过element-ui表单提交name参数
vue省城县三级联动实现以及通过element-ui表单提交name参数先声明：封装以及方法是摘自：https://www.cnblogs.com/missya/p/11247405.html直通车点这儿
改编开始：因为是自己封装的省城县，所以后台需要的参数是name参数，而不是id
刚开始我是绑定id的，图示：
虽然功能显示都正常，但是拿不到后台需要的name参数，
所以需要进行改动。图示：
这样是可以拿到id还有name，但是你选择的时候，显示的数据是乱的，最后再看了一眼文档，是这样的：
不能绑定对象…
决定做最后的挣扎
绑定字符串，id和name拼接起来，在chang事件中再剪接，然后拿到自己的想要的值，赋值给表单即可。事实证明是可行的，代码附上;
html:
<el-form-item label="开户银行所在地：" prop="provinceValue" label-width="152px" class="province">
<el-select v-model="formData.provinceValue" class="city_province" placeholder="请选择开户行所在省份" @change="selectProvimce" @visible-change="changeIcon">
<el-option
v-for="(item,index) of provincearr"
:key="index"
:label="item.name"
:value="item.name + ',' + item.id"
></el-option>
</el-select>
<img src="../../assets/releaseProgress/xiala.png" class="city">
<el-select v-model="formData.cityValue" class="city_city" placeholder="请选择开户行所在城市" @change="selectCity" @visible-change="changeIcon1">
<el-option
v-for="(item,index) of cityarr"
:key="index"
:label="item.name"
:value="item.name + ',' + item.id"
></el-option>
</el-select>
<img src="../../assets/releaseProgress/xiala.png" class="region">
<el-select placeholder="请选择开户行所属区县" class="city_area" @change="selectRegion" v-model="formData.regionValue" @visible-change="changeIcon2">
<el-option
v-for="(item,index) of regionarr"
:key="index"
:label="item.name"
:value="item.name + ',' + item.id"
></el-option>
</el-select>
<img src="../../assets/releaseProgress/xiala.png" this.cityarr = []
this.regionarr = []
this.formData.cityValue = ''
this.formData.regionValue = ''
// 返回字符串中一个子串第一处出现的索引（从左到右搜索）。如果没有匹配项，返回 -1 。（因为name的长度不固定，所以在html中手动添加逗号做标记）
let strIndex = id.indexOf(',')
// 剪接
let newName = id.substring(0, strIndex)
// 拿到name
this.formData.provinceValue = newName
for (const item of this.provincearr) {
if (newName === item.name) {
this.cityarr = item.children
}
}
},
如果你想用id判断，并且又需要到name，那可以这样
// 选中市获取县数据
selectCity (id) {
this.regionarr = []
this.formData.regionValue = ''
let strIndex = id.indexOf(',')
// 前切
let newName = id.substring(0, strIndex)
this.formData.cityValue = newName
// 拿到id
let newLength = id.length
// id都是6位数（后切）
let newId = id.substring(newLength-6, newLength)
for (const item of this.cityarr) {
if (newId === item.id) {
this.regionarr = item.children
}
}
},
但是这样会多了几行代码，所以看你具体需求吧。
解决问题的方法很多，但我总是找不到一个，哈哈