一、项目需求
在一个项目需求中,我们很多时候需要进行地区的三级联动选择,这个相信很多人都不陌生,也就不过多介绍了,但是在有的时候,我们需要进行等级选择
1、等级选省级择只能选择省级菜单,市级和县级隐藏,
2、选择市级,那么只隐藏县级菜单,
3、选择县级都不隐藏
如:
二、可能产生的bug
在选择的时候,我们有可能选择县级,区域全部选择完成,但突然又改为市级,那么这个时候就要重置数据,如不重置,上传时会把已经隐藏的县级code也一起传给后台,造成bug
三、如何解决
解决当然很简单,就是在每一次区域选择的时候重置一线省市区的数据,如下图
四、衍生bug
其中changeHosform是编辑新增中的数据,也就是遇到bug的地方,如上图中的最后注释的一项,如果我重置了区级的数据,会造成视图数据不统一的bug,也就是选择了区级项,页面上无显示,但是数据却有了,再在之后的输入框中填入数据,区级的视图又出来了
这里已经选好了最后的区级项目,但是无显示
这里在下面的输入框中输入数据
在我苦思无果之后求助了论坛,当然答案也是五花八门
五、论坛给出的可能
1、打开弹窗或者选择每级下拉的时候,未重置后面的数据
切换等级的代码里面只是写了清空下拉选中的值,并没有写重置下拉选项的数据。
等级数组 下拉选项array 等级值
子级1 下拉选项array 子级1值
子级2 下拉选项array 子级2值
子级3下拉选项array 子级3值等级切换重置3个子级数组及选择的值
子级1切换重置子级2和3 数组及值
子级2切换重置子级3 数组及值
相当于是4级联动
2、数据类型不统一
那就只能是你的数据类型不统一了, dom上的值是字符返回的值是数字或者相反
六、解决
在这些回答中,并没有抓住根本点,虽然上述也会造成bug不过显示效果是不一样的,之后我试了一下百度出的$set方法来解决。
这样做,视图是成功显示了,但是又出现一个问题,那就是,多出了一条数据来
之后经过论坛提醒,找到了错误原因
看你代码肯定写的有问题,$set一般是用来处理没有初始化的对象或者是处理数组的增删操作。因为vue无法对数组的增删做实时渲染,没初始化的对象也不可以实时渲染。
这句话如醍醐灌顶,让我瞬间想到了错误点在哪:
我在点击新增按钮时,因为有的参数不能直接用框架自带的重置方法,所以手动重置了一下,但却在新增的时候重置数据写成了this.changeHosform ={},这就造成了对象无初始化数据
找到问题了,更改就简单了,重置数据时不直接写成空,而是使用键值对模式
七、部分代码
下面粘一下相关部分代码,希望对大家有点用处,另写代码时细心,不要忽略细节。
<el-dialog
:title="changeName + 'XXXXXX'"
:visible.sync="dialogVisible"
class="dialog-edmin"
>
<el-form
ref="changeHosform"
:rules="rules"
:model="changeHosform"
label-width="120px"
label-position="left"
>
<el-row :gutter="20">
<el-col :span="24">
<el-form-item label="等级" prop="level">
<el-select
v-model="changeHosform.level"
placeholder="请选择"
:disabled="isdisabled"
@change="levelChange()"
>
<el-option
v-for="item in levelOptions"
:key="item.value"
:label="item.label"
:value="item.value"
>
</el-option>
</el-select>
</el-form-item>
</el-col>
</el-row>
<el-row :gutter="20">
<el-form-item
style="padding-left:10px"
label="区划"
v-if="
changeHosform.level === 2 ||
changeHosform.level === 3 ||
changeHosform.level === 4
"
>
<el-col
style="padding-left:0px"
>
<el-select
v-model="changeHosform.provinceNo"
@change="provinceChange"
placeholder="请选择"
:disabled="isdisabled"
filterable
>
<el-option
v-for="item in provinceOptions"
:key="item.id"
:label="item.regionName"
:value="item.regionNo"
>
</el-option>
</el-select>
</el-col>
<el-col
:span="6"
v-if="changeHosform.level === 3 || changeHosform.level === 4"
>
<el-select
v-model="changeHosform.cityNo"
@change="cityChange"
placeholder="请选择"
:disabled="isdisabled"
filterable
>
<el-option
v-for="item in cityOptions"
:key="item.id"
:label="item.regionName"
:value="item.regionNo"
>
</el-option>
</el-select>
</el-col>
<el-col
:span="6"
v-if="changeHosform.level === 4"
>
<el-select
v-model="changeHosform.areaNo"
placeholder="请选择"
:disabled="isdisabled"
filterable
>
<el-option
v-for="item in areaOptions"
:key="item.id"
:label="item.regionName"
:value="item.regionNo"
>
</el-option>
</el-select>
</el-col>
</el-form-item>
</el-row>
</el-form>
</el-dialog>
弹窗部分内容
changeHosform: {
provinceNo: '',
cityNo: '',
areaNo: '',
level: '',
},
levelOptions: [
{
label: '平台级',
value: 1,
},
{
label: '省级',
value: 2,
},
{
label: '市级',
value: 3,
},
{
label: '县级',
value: 4,
},
{
label: '医院级',
value: 5,
},
],
provinceOptions: [], //省级列表
cityOptions: [],//市级列表
areaOptions: [],//区级列表
state中的部分数据
created() {
this.getprovinceList()
},
//改变等级
levelChange() {
this.changeHosform.HspitalID = ''
this.changeHosform.provinceNo = ''
this.changeHosform.cityNo = ''
this.changeHosform.areaNo = ''
},
//获取省列表
getprovinceList() {
let data = {
RegionType: 1,
}
this.loading = true
GetRegionList(data, this).then((res) => {
if (res.code === 200) {
this.provinceOptions = res.data
} else {
//用户登录验证超时,跳转登录页
this.$notify.error({
title: '错误',
message: res.message,
})
}
this.loading = false
})
},
//改变省
provinceChange(val) {
let data = {
RegionType: 2,
regionNo: val,
}
this.loading = true //改变loading状态
this.cityOptions = [] //重置市级列表
this.areaOptions = [] //重置区级列表
this.changeHosform.cityNo = '' //重置市级code
this.changeHosform.areaNo = '' //重置区级code
GetRegionList(data, this).then((res) => {
if (res.code === 200) {
this.cityOptions = res.data
} else {
//用户登录验证超时,跳转登录页
this.$notify.error({
title: '错误',
message: res.message,
})
}
this.loading = false
})
},
//改变市
cityChange(val) {
let data = {
RegionType: 3,
regionNo: val,
}
this.areaOptions = [] //重置区级列表
this.changeHosform.areaNo = '' //重置区级code
this.loading = true
GetRegionList(data, this).then((res) => {
if (res.code === 200) {
this.areaOptions = res.data
} else {
//用户登录验证超时,跳转登录页
this.$notify.error({
title: '错误',
message: res.message,
})
}
this.loading = false
})
},
//根据不同按钮确定弹窗
changeServe(val, value) {
if (val === 'addServe') {
this.changeHosform = {
provinceNo: '',
cityNo: '',
areaNo: '',
level: '',
}
this.changeName = '新增'
this.isdisabled = false
this.dialogVisible = true
}
//其他按钮我就省略了
}
今天的bug就介绍到这里了,希望对大家有帮助,祝大家轻松写代码,少加班不秃头,早日找到女朋友!!!!!!!