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

css趣多多2026-02-08 18:59

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

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

javascript 复制代码

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

1.2 初始状态：表单隐藏

javascript 复制代码

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

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

javascript 复制代码

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

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

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

javascript 复制代码

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

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

1.5关闭表单：隐藏并重置

javascript 复制代码

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

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