目录
项目问题描述:
当我点击模块A前面的单选框时输入框有值显示(证明我选择的值是被选择到了),但是单选框没有选中的状态(只有点击两次才会被选中),用户体验不好。。。那怎么解决呢? 我发现 elementui 里面的demo是没有 v-modle双向绑定的 我试这把 v-modle 这一行 删除掉 惊奇的事发生了! 我再次选择模块A前面的单选框只需点击一次即可,无需点击两次就有状态回显
解决方案:
<el-form-item label="用例所属分组 :" prop="groupId">
<el-cascader
v-model="form.groupId"
:options="options"
:props="{
expandTrigger: 'hover',
checkStrictly: true,
value:'id',//做映射因为后端返回的字段不是value和label 而是id groupName
label:'groupName',
}"
clearable
@change="handleChange">
</el-cascader>
</el-form-item>
将代码中的 v-model="form.groupId" 这一行删掉问题解决 但是新的问题出来了 我要v-model肯定是要根据所选的菜单拿到对应的值 删除后 我咋获取值 ?
方法来了:@change="handleChange" 给组件添加change事件每次选择的时候就会拿到你所选值的一个数组 然后根据需求在给到你提交的表单里 这样就可以替代v-modle双向绑定拿值的问题
注意重点:
之所以要用 v-modle 是因为他可以双向数据绑定 当我选择的值发生变化的时候 拿到的数据变化 当我数据变化的时候我的页面也会渲染对应的值选中状态,上面@change="handleChange" 只是解决了我选择的值发生变化的时候 拿到的数据变化 相当于v-bind 单向数据绑定 当我只有提交表单这个需求的时候当然到这一步就没啥问题了 那么当我 有编辑操作的时候 又该怎么办呢??当我点击编辑拿到级联的数据怎样回显在输入框里呢
(如果此时有v-modle多好啊,哈哈哈),
看官网兄弟们 级联的 value 属性就是 他的所选中label所对应的值所以话不多说 代码展示
<el-form-item label="用例所属分组 :" prop="groupId"> <el-cascader :value="editshowvalue" :options="options" :props="{ expandTrigger: 'hover', checkStrictly: true, value:'id',//做映射因为后端返回的字段不是value和label 而是id groupName label:'groupName', }" clearable @change="handleChange"> </el-cascader> </el-form-item> data(){ return{ editshowvalue:[]//定义变量 级联 放置数据即可回填 例如:[769,777] 某个选项的id 以及他父级的id } } //编辑用力功能 获取单条用例详细信息 async getcaseinfo(caseId) { const { data: res } = await this.getRequest( `case/info?projectId=${this.$store.state.projectId}&caseId=${caseId}` ); console.log(res); //将编辑拿到的id传给 editshowvalue 这个变量即可 渲染在页面 this.editshowvalue = res.groupId; },
总结:
归根结底问题出在了v-modle双向数据绑定身上,我所采用的方法就是避免使用v-modle,但又不能失去v-modle所带来的解决问题的能力,所以分了两步骤来代替了v-modle的双向数据绑定;至此问题解决。