业务描述：新增与修改复用同一个组件（a-modal包裹的），表单数据需要缓存（离开该页面，再回到该页面，编辑的内容不会丢失）

使用的UI框架：ant-design-vue

页面长这样：

逻辑分析：首先该组件是被keep-alive缓存的，数据不会随页面切换而丢失的。我采用的办法如下：

1.如何区别是新增操作还是修改操作：①通过标识符区分是新增，还是修改；②通过传过的数据是否存在id来区别。我采用用标识符来区别

2.编辑时如何赋值：我采用的是在显示时，父组件将数据传到子组件，在子组件保存起来，(注：这里需要拷贝一下，免得影响父组件的数据)

再在watch中监听数据id的变化，从而对表单赋值，这样确实能实现切换不同项编辑时，表单都能正确赋值。但在这时问题来了，去操作新增，表单值还为上次编辑项的值

   

我采用的方法是通过监听type的变化，来解决，为新增操作时就清空表单，为修改操作时就对表单赋值。

这样就实现了新增，修改共用一个组件，且正确的缓存表单的数据。

到这里就结束了，喜欢的朋友可以点赞！

希望大佬们能留下其他的方案，让我能学习学习！十分感谢！

Logo
Vue

前往低代码交流专区

更多推荐

vue 表单验证

1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^

avatar Vue
cover

echarts堆叠柱状图

avatar Vue

Error in v-on handler: "TypeError: Cannot read properties of undefined (reading 'current')"

这是一个 Vue.js 错误，报错信息提示在 v-on 处理程序中出现了错误：“TypeError: Cannot read properties of undefined(读取 'current')”。这意味示在您的代码中，试图读取一个未定义的变量 'current'。您需要检查您的代码，确保 'current' 已正确定义并初始化。...

avatar Vue