ctx 上下文对象控制新增 / 编辑表单显示隐藏的逻辑

1 ctx 上下文对象控制新增 / 编辑表单显示隐藏的逻辑

1.1控制新增 / 编辑表单模板

<template v-if="ctx.type === 'add' || ctx.type === 'edit'"><Add:record="ctx.record"@close="handleClose"@refresh="getList"/></template>

1.2 初始状态：表单隐藏

ctx:{type:null,// 初始为null，不满足v-if条件record:null,// 初始无选中数据}

1.3 点击「新增」：展示空表单

handleAdd(){this.ctx.type="add";// 赋值为add，满足v-if条件// 无需给record赋值，子组件接收空值，渲染空表单}

此时 Add 组件显示，且 :record=“ctx.record” 传递的是 null，子组件可识别为「新增模式」，展示空白表单。

1.4点击「编辑」：展示带数据的表单

handleEdit(row){this.ctx.type="edit";// 赋值为edit，满足v-if条件this.ctx.record=row;// 把当前行数据传给record，子组件接收后回显}

Add 组件显示，且接收了当前行的完整数据，子组件可识别为「编辑模式」，将 record 中的数据回显到表单对应字段。

1.5关闭表单：隐藏并重置

handleClose(){this.ctx.type=null;// 置空，隐藏Add组件this.ctx.record=null;// 清空选中数据，避免下次打开残留}

点击子组件的关闭按钮时，触发 @close=“handleClose”，重置上下文状态，表单隐藏且数据清空。