ElementUI el-cascader级联选择器显示上次选中数据回显

项目场景:

项目上使用cascader级联选择器组件时,初始化时选中数据,再次进入级联选择器只会默认高亮回显展示上次选中数据信息。


问题描述

选择级联选择器时,第二次没有进行销毁组件,因此会导致只会默认高亮上次展示

<el-cascader style="width:180px" 
      placeholder="请选择数据"
      v-model="update.cate" 
      :props="optionProps" 
      :options="options" 
      clearable >
</el-cascader>



 optionProps: {
        value: 'fixedassetCode',  //名称展示
        label: 'name',            //值展示
        checkStrictly: true,     //是否严格的遵守父子节点不互相关联
        expandTrigger:'click',   //次级菜单的展开方式
              
        },

再次进入回显时没有进行销毁组件,可以使用v-if 或者是给组件绑定key产生唯一标识,更新虚拟dom就不会存在回显


<el-cascader style="width:180px" 
      placeholder="请选择数据"
      v-model="update.cate" 
      :props="optionProps" 
      :key="cascaderKeysb"
      :options="options" 
      :key='keyvalue'
      clearable >
</el-cascader>

在进入选择级联选择器进行更新绑定的key值

++this.cascaderKeysb

猜你喜欢

转载自blog.csdn.net/qq_52337177/article/details/128529071