新增和编辑使用同一个页面

<template>
  <div class="container">
    <el-button
      type="primary"
      icon="el-icon-plus"
      class="table-nav-btn"
      @click="goToDetail('')"
    >新增</el-button>

    <el-table-column label="操作" align="left" fixed="right" width="120px">
      <!-- 使用作用域插槽拿到当前行id 注：新增不需要id 编辑需要id -->
      <template slot-scope="scope">
        <div class="jh-space-between">
          <el-link
            type="primary"
            @click="goToDetail(scope.row.id)"
          >编辑</el-link>
        </div>
      </template>
    </el-table-column>
  </div>
</template>

<script>
export default {
  methods: {
    // 新增/编辑-跳转
    goToDetail(id) {
      this.$router.push({
        path: '/marketingManagement/setMealActivity/index/details',
        query: { 
          id,
          isAdd: !id
        }
      })
    }
  }
}
</script>

新增&编辑页面

  mounted() {
    const { id } = this.$route.query //获取id
    if (id) {
      // 根据有无id判断 有id则是编辑 调用接口获取数据回显
      this.getSetMealDetail(id)
    }
    this.type = id ? 'edit' : 'add' //判断 无id则是新增 type类型为新增
    this.form.id = id || ''
    if (this.type === 'add') {
     //type类型为新增 处理新增的逻辑
      this.form.coverUrl = this.setMealCoverUrl
      this.$nextTick(() => {
        this.courseCover = [{ url: this.setMealCoverUrl }]
      })
    }
  },
  methods: {
   //调取编辑页面回显的数据
    getSetMealDetail(id) {
      getSetMealDetail({ id }).then((res) => {
        //这里通过接口获取数据 赋值
      })
    },
    // 新增&编辑表单后提交
    submit() {
      this.$refs.form.validate((valid) => {
        // 表单校验
        if (valid) {
          const data = Object.assign({}, this.form)
          if (this.type === 'edit') { // 判断如果是编辑则调取编辑接口
            this.editSetMeal(data)
          } else {
            this.addSetMeal(data)
          }
        } else {
          return false
        }
      })
    }
  }