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

乐~~~2025-09-27 10:04

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

问题现象

问题排查

解决方案

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

问题现象

树结构重置失效

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

问题排查

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

解决方案

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

代码如下：

javascript 复制代码

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部分：

html 复制代码

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