项目问题描述：

当我点击模块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肯定是要根据所选的菜单拿到对应的值删除后我咋获取值？

扫描二维码关注公众号，回复： 15228146 查看本文章

方法来了：@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的双向数据绑定；至此问题解决。

关于el-cascader级联选择器的---(单选选择任意一级组件)---选择时双击两次才显示被选中的情况分析

项目问题描述：

解决方案：

注意重点：

总结：

猜你喜欢