element和vue下拉框数据和视图不统一问题

[sha虫剂]

在一个项目中，我要根据选择的等级选择地区，再把地址id传给后台，类似这样

但是在选择中，考虑到选到一半可能会变换等级，所以我在选择等级的时候写了一个chang方法来重置参数

方法内容如下

其中hosform是页面搜索时的参数，changeHosform是新增编辑打开的弹窗（dialog）里面的参数，
如上图，我本想直接重置所有的地区参数，但是在弹窗的地址中，我如果重置了最后一项，也就是区级参数的话，
在进行地址选择时，选择区级会导致页面上不显示，但是通过打印发现数据是有发生变化的
（但是在搜索页面上我也是重置到了区级，并无任何问题）
求解我该怎么做，这个地方如果不重置，是有可能造成bug的




注：地区数据是从后台拉取的，每选一级拉取下一级的数据

[sha虫剂]

引用 5 楼 jio可 的回复:

切换等级的代码里面只是写了清空下拉选中的值，并没有写重置下拉选项的数据。 等级数组 下拉选项array 等级值 子级1 下拉选项array 子级1值 子级2 下拉选项array 子级2值 子级3下拉选项array 子级3值 等级切换重置3个子级数组及选择的值 子级1切换重置子级2和3 数组及值 子级2切换重置子级3 数组及值 相当于是4级联动

我的数据都是从后台拉过来的，每选择一项都重新请求，所以里面的值除了省级的数据进页面就拉取了，其他都是根据选择来赋值的

[jio可]

那就只能是你的数据类型不统一了, dom上的值是字符返回的值是数字或者相反

[sha虫剂]

如果没有重置，我的下拉选项数据会是错的，但是我每一级下拉选项数据没问题 有问题的只是选择之后有值没显示

[joe_free]

多谢大佬分享

[sha虫剂]

引用 7 楼 jio可 的回复:

那就只能是你的数据类型不统一了, dom上的值是字符返回的值是数字或者相反

不是 所有的数据和方法都是一模一样的

[console.log( )]

级联问题？ 选择某一级，在这一级更改绑定参数的函数中将下一级绑定的参数清空，下拉列表可以在你点击输入框的时候去发请求

[sha虫剂]

级联没问题 也确实是清空了的 绑定了change方法，问题在于我不把区级的重置为空就一点问题没有，一旦重置区级就要出问题，重置省级和市级就没这个问题

引用 10 楼 console.log( ) 的回复:

级联问题？ 选择某一级，在这一级更改绑定参数的函数中将下一级绑定的参数清空，下拉列表可以在你点击输入框的时候去发请求

[sha虫剂]

如图 下拉数据是取回来了的 只是点击选择之后，下拉框里面是空白，但是 changeHosform.areaNo 是成功赋值了的

[console.log( )]

引用 11 楼 sha虫剂 的回复:

级联没问题 也确实是清空了的 绑定了change方法，问题在于我不把区级的重置为空就一点问题没有，一旦重置区级就要出问题，重置省级和市级就没这个问题 [quote=引用 10 楼 console.log( ) 的回复:] 级联问题？ 选择某一级，在这一级更改绑定参数的函数中将下一级绑定的参数清空，下拉列表可以在你点击输入框的时候去发请求

[/quote] 了解了 不过你这不仅仅要在选择等级的时候清空，还要在选择级联的时候，把下一级清空 你选择省，要把市清空

[sha虫剂]

引用 10 楼 console.log( ) 的回复:

级联问题？ 选择某一级，在这一级更改绑定参数的函数中将下一级绑定的参数清空，下拉列表可以在你点击输入框的时候去发请求

[/quote] 了解了 不过你这不仅仅要在选择等级的时候清空，还要在选择级联的时候，把下一级清空 你选择省，要把市清空[/quote] 清空我都是做了的，在三级联动方面没有任何问题，问题是在，我在选择等级时，一旦重置弹窗里面的区级单位，就会造成视图和数据不统一现象（数据有视图不展示）

[jio可]

你贴代码出来吧，这样说也解决不了问题。 能有在线地址更好

[sha虫剂]

通过网上查询，通过$set来消除数据和视图不统一问题 开始的数据视图不统一问题是解决了 显示完全正常 可是又出现了新问题 那就是参数中多了一条数据

[jio可]

看你代码肯定写的有问题，$set一般是用来处理没有初始化的对象或者是处理数组的增删操作。因为vue无法对数组的增删做实时渲染，没初始化的对象也不可以实时渲染。

[sha虫剂]

<el-dialog :title="changeName + '服务器信息'" :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" :xs="23" :sm="12" :md="10" :lg="8" :xl="6" > <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" :xs="23" :sm="12" :md="10" :lg="8" :xl="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" :xs="23" :sm="12" :md="10" :lg="8" :xl="6" v-if="changeHosform.level === 4" > <el-select v-model="changeHosform.areaNo" @change="$set(changeHosform, changeHosform.areaNo, $event)" 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> 这是弹窗里面截取代码

[sha虫剂]

changeHosform: { provinceNo: '', cityNo: '', areaNo: '', level: '', }, provinceOptions: [], levelOptions: [ { label: '平台级', value: 1, }, { label: '省级', value: 2, }, { label: '市级', value: 3, }, { label: '县级', value: 4, }, { label: '医院级', value: 5, }, ], cityOptions: [], areaOptions: [], data中对应参数

[jio可]

没看懂你给最后一个下拉框写change事件做什么，这个值的改变对其他都没影响，纯粹是一个给api的参数。

[sha虫剂]

引用 21 楼 jio可 的回复:

没看懂你给最后一个下拉框写change事件做什么，这个值的改变对其他都没影响，纯粹是一个给api的参数。

那个是要同步改别的地方的东西，选择完之后 然后问题已经找到了，一语惊醒梦中人， 因为有的参数不能直接用框架自带的重置方法，所以手动重置了一下，但我却在新增的时候重置数据写成了this.changeHosform ={}，这就造成了你说的对象无初始化数据，现在已经改好了，多谢

[taocaizhi]

切换等级的代码里面只是写了清空下拉选中的值，并没有写重置下拉选项的数据。
等级数组 下拉选项array 等级值
子级1 下拉选项array 子级1值
子级2 下拉选项array 子级2值
子级3下拉选项array 子级3值

等级切换重置3个子级数组及选择的值
子级1切换重置子级2和3 数组及值
子级2切换重置子级3 数组及值

相当于是4级联动

[sha虫剂]

引用 23 楼 joe_free 的回复:

多谢大佬分享

我也是自己遇到问题了

[sha虫剂]

引用 25 楼 taocaizhi 的回复:

切换等级的代码里面只是写了清空下拉选中的值，并没有写重置下拉选项的数据。 等级数组 下拉选项array 等级值 子级1 下拉选项array 子级1值 子级2 下拉选项array 子级2值 子级3下拉选项array 子级3值 等级切换重置3个子级数组及选择的值 子级1切换重置子级2和3 数组及值 子级2切换重置子级3 数组及值 相当于是4级联动

兄弟 问题已经解决了 然后你说这个可能 上面已经说过了