vue中编辑和新增数据使用同一个dialog，dialog中使用同一个保存方法

最新推荐文章于 2024-05-08 09:47:26 发布

小学生也要加班

最新推荐文章于 2024-05-08 09:47:26 发布

阅读量1.5k

点赞数

分类专栏：初级前端文章标签： vue.js javascript

本文链接：https://blog.csdn.net/weixin_44281416/article/details/109312015

版权

初级前端专栏收录该内容

43 篇文章 4 订阅

订阅专栏

在这里插入图片描述
新增和编辑的字段是一样的，所以展示同一个dialog,唯一的区别就是新增里面的字段都是空的，但是编辑里面的字段是表格中已经存在的，并且都是有数据的。
图1新增的dialog,字段里面的数据都是空的

图2编辑的dialog里面的字段是有数据的
在这里插入图片描述

//新增操作
<el-button type="primary" size="mini" style="margin-top:5px;" @click="addProgram">新增</el-button>


//编辑操作
<el-table-column label="操作">
  <template slot-scope="scope">
    <el-button type="primary" size="mini" @click="editProgram(scope.row)">编辑</el-button>
  </template>
</el-table-column>


//打开新增的diaglog最后进行保存
<div slot="footer" class="dialog-footer">
   <el-button @click="dialogTableVisible = false">取 消</el-button>
   <el-button type="primary" @click="saveData">保 存</el-button>
</div>


//下面是新增或编辑之后的保存方法
//保存新增数据
<script>
methods:{
//新增数据
  addProgram() {
    this.type = 1//新增数据的type为1
    this.dialogTableVisible = true//当点击新增按钮的时候跳出dialog
    this.clear()//打开的时候清空表格中的数据
  },
//编辑数据
  editProgram(row) {
    this.type = 2//编辑数据的type为2
    this.gridData = row//表格中的数据赋值给列表，从而在dialog中就有数据了
    this.dialogTableVisible = true//当点击编辑按钮的时候跳出dialog
    },
//保存数据
saveData(type) {//给保存方法添加参数，用来区分是新增还是编辑
  if (this.type == 1) {//如果是新增
    this.API.tIndEncPerformanceSave(this.gridData)
      .then((res) => {
        console.log(res)
        if (res.code == 200) {
          this.$message.success('保存成功')
          this.tIndEncPerformancePageByDate()//更新显示整个表格，做一步查询操作
          this.dialogTableVisible = false
        }
      })
      .catch((err) => {
        this.$message.error(err)
        this.dialogTableVisible = false
      })
  } else if (this.type == 2) {//如果是编辑
    this.API.tIndEncPerformanceUpdate(this.gridData).then((res) => {
      console.log(res)
      if (res.code == 200) {
        this.$message.success('保存成功')
        this.tIndEncPerformancePageByDate()
        this.dialogTableVisible = false
      }
    })
  }
},
}
</script>