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

sha虫剂 2020-05-28 04:27:47
在一个项目中,我要根据选择的等级选择地区,再把地址id传给后台,类似这样

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

方法内容如下

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




注:地区数据是从后台拉取的,每选一级拉取下一级的数据
...全文
571 点赞 收藏 24
写回复
24 条回复
切换为时间正序
请发表友善的回复…
发表回复
sha虫剂 2020-06-01
引用 25 楼 taocaizhi 的回复:
切换等级的代码里面只是写了清空下拉选中的值,并没有写重置下拉选项的数据。 等级数组 下拉选项array 等级值 子级1 下拉选项array 子级1值 子级2 下拉选项array 子级2值 子级3下拉选项array 子级3值 等级切换重置3个子级数组及选择的值 子级1切换重置子级2和3 数组及值 子级2切换重置子级3 数组及值 相当于是4级联动
兄弟 问题已经解决了 然后你说这个可能 上面已经说过了
回复
sha虫剂 2020-06-01
引用 23 楼 joe_free 的回复:
多谢大佬分享
我也是自己遇到问题了
回复
taocaizhi 2020-05-31
切换等级的代码里面只是写了清空下拉选中的值,并没有写重置下拉选项的数据。
等级数组 下拉选项array 等级值
子级1 下拉选项array 子级1值
子级2 下拉选项array 子级2值
子级3下拉选项array 子级3值

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

相当于是4级联动
回复
sha虫剂 2020-05-29
引用 21 楼 jio可 的回复:
没看懂你给最后一个下拉框写change事件做什么,这个值的改变对其他都没影响,纯粹是一个给api的参数。
那个是要同步改别的地方的东西,选择完之后 然后问题已经找到了,一语惊醒梦中人, 因为有的参数不能直接用框架自带的重置方法,所以手动重置了一下,但我却在新增的时候重置数据写成了this.changeHosform ={},这就造成了你说的对象无初始化数据,现在已经改好了,多谢
回复
jio可 2020-05-29
没看懂你给最后一个下拉框写change事件做什么,这个值的改变对其他都没影响,纯粹是一个给api的参数。
回复
sha虫剂 2020-05-29
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中对应参数
回复
sha虫剂 2020-05-29
<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> 这是弹窗里面截取代码
回复
jio可 2020-05-29
看你代码肯定写的有问题,$set一般是用来处理没有初始化的对象或者是处理数组的增删操作。因为vue无法对数组的增删做实时渲染,没初始化的对象也不可以实时渲染。
回复
sha虫剂 2020-05-29
通过网上查询,通过$set来消除数据和视图不统一问题 开始的数据视图不统一问题是解决了 显示完全正常 可是又出现了新问题 那就是参数中多了一条数据
回复
jio可 2020-05-29
你贴代码出来吧,这样说也解决不了问题。 能有在线地址更好
回复
sha虫剂 2020-05-29
引用 10 楼 console.log( ) 的回复:
级联问题? 选择某一级,在这一级更改绑定参数的函数中将下一级绑定的参数清空,下拉列表可以在你点击输入框的时候去发请求
[/quote] 了解了 不过你这不仅仅要在选择等级的时候清空,还要在选择级联的时候,把下一级清空 你选择省,要把市清空[/quote] 清空我都是做了的,在三级联动方面没有任何问题,问题是在,我在选择等级时,一旦重置弹窗里面的区级单位,就会造成视图和数据不统一现象(数据有视图不展示)
回复
console.log( ) 2020-05-29
引用 11 楼 sha虫剂 的回复:
级联没问题 也确实是清空了的 绑定了change方法,问题在于我不把区级的重置为空就一点问题没有,一旦重置区级就要出问题,重置省级和市级就没这个问题 [quote=引用 10 楼 console.log( ) 的回复:] 级联问题? 选择某一级,在这一级更改绑定参数的函数中将下一级绑定的参数清空,下拉列表可以在你点击输入框的时候去发请求
[/quote] 了解了 不过你这不仅仅要在选择等级的时候清空,还要在选择级联的时候,把下一级清空 你选择省,要把市清空
回复
sha虫剂 2020-05-29
如图 下拉数据是取回来了的 只是点击选择之后,下拉框里面是空白,但是 changeHosform.areaNo 是成功赋值了的
回复
sha虫剂 2020-05-29
级联没问题 也确实是清空了的 绑定了change方法,问题在于我不把区级的重置为空就一点问题没有,一旦重置区级就要出问题,重置省级和市级就没这个问题
引用 10 楼 console.log( ) 的回复:
级联问题? 选择某一级,在这一级更改绑定参数的函数中将下一级绑定的参数清空,下拉列表可以在你点击输入框的时候去发请求
回复
console.log( ) 2020-05-29
级联问题? 选择某一级,在这一级更改绑定参数的函数中将下一级绑定的参数清空,下拉列表可以在你点击输入框的时候去发请求
回复
sha虫剂 2020-05-29
引用 7 楼 jio可 的回复:
那就只能是你的数据类型不统一了, dom上的值是字符返回的值是数字或者相反
不是 所有的数据和方法都是一模一样的
回复
joe_free 2020-05-29
多谢大佬分享
回复
sha虫剂 2020-05-28
如果没有重置,我的下拉选项数据会是错的,但是我每一级下拉选项数据没问题 有问题的只是选择之后有值没显示
回复
jio可 2020-05-28
那就只能是你的数据类型不统一了, dom上的值是字符返回的值是数字或者相反
回复
sha虫剂 2020-05-28
引用 5 楼 jio可 的回复:
切换等级的代码里面只是写了清空下拉选中的值,并没有写重置下拉选项的数据。 等级数组 下拉选项array 等级值 子级1 下拉选项array 子级1值 子级2 下拉选项array 子级2值 子级3下拉选项array 子级3值 等级切换重置3个子级数组及选择的值 子级1切换重置子级2和3 数组及值 子级2切换重置子级3 数组及值 相当于是4级联动
我的数据都是从后台拉过来的,每选择一项都重新请求,所以里面的值除了省级的数据进页面就拉取了,其他都是根据选择来赋值的
回复
发动态
发帖子
JavaScript
创建于2007-09-28

8.4w+

社区成员

Web 开发 JavaScript
申请成为版主
社区公告
暂无公告