解决avue-input-tree组件重置数据不回显/重置失败

解决方式：使用JSON.parse(JSON.stringify(value)) 进行赋值，且给 dic 也重新赋值。        

       

目录

问题现象

问题排查

解决方案

---

         最近在使用avue-input-tree组件展示物料数据时，遇到了一个有趣的问题：页面重置操作无法将数据恢复到初始值，而是在初始值基础上追加了修改后的值。经过一番排查，终于找到了问题的根源和解决方法。

问题现象

树结构重置失效

假如：默认选中【888，999】，修改为【test23344,2】，但是点击【重置】后，就成了追加，如图。

问题排查

        经过仔细测试和代码排查，我们发现问题出在avue-input-tree组件的dicts属性上。虽然我们在初始化时设置了初始值，但可能在重置操作后，重新渲染组件时，没有正确地对dicts进行重新赋值，导致组件无法感知到数据的变化，从而在重置时出现了错误的追加行为。

解决方案

重置时给avue-input-tree的dic也重新赋值。

代码如下：

methods: {handleOnTemplate(tempItem, templateList) {console.log(tempItem, '模板tempItem-----');if (templateList?.length) {this.modelCategory = [];this.modelCategory = tempItem?.modelCategorys?.value ? JSON.parse(JSON.stringify(tempItem?.modelCategorys?.value)) : [];this.queryParams.modelCategorys = tempItem?.modelCategorys?.value || [];this.modelCategorysList = tempItem?.modelCategorys?.options? JSON.parse(JSON.stringify(tempItem?.modelCategorys?.options)) : [];}},
}

html部分：

<template slot="form-modelCategorys"><avue-input-tree :props="{ label: 'categoryName', value: 'categorysCode' }":dic="modelCategoryList" multiple v-model="modelCategory" placeholder="请选择 物料分类"></avue-input-tree>
</template>