【vue antdesign表格增删改查】新增和编辑数据 同一个modal弹窗

下面展示一些 内联代码片

1. addFlag : 三目运算切换 modal弹窗标题 新建 或 编辑
2. showModal : 是否显示弹窗
3. @click事件:可以有两个表达式
<a-button class="addResearch" @click="addFlag=true;showModal=true"><a-icon type="plus"/>新建研判</a-button>
<a-modal :visible.sync="showModal" :before-close="handleClose" :title="addFlag? '新建研判':'修改研判'" ok-text="确认" cancel-text="取消" @ok="saveTab()">
  <div class="modal"><span>研判名称</span><a-input v-model="tabObj.name" placeholder="" style="margin-left:20px;width:300px"/></div>
  <span slot="footer" class="dialog-footer">
     <a-button type="success" @click="saveTab()">提交</a-button>
     <a-button type="primary" @click="showModal = false">取消</a-button>
  </span>
</a-modal>
//js
//data函数
data(){
  return {
    tabObj:{}
    addFlag: true,
    showModal: false,

返回后台的参数: name,data

//js
//methods函数
methods:{
  //新增
  async saveTab () {
      let params = {}
      params.name = this.tabObj.name
      params.data = ''
      let res = await testService.getAdd(params)
      console.log('res:', res)
      this.showModal = false
      this.getTableList()
  }

突破点: tabObj

 // 编辑
    handleEdit (record) {
      console.log('deRecord:', record)
      this.addFlag = false
      this.showModal = true
      this.tabObj.name = ''
    },

**

总结

  1. 共用一个modal弹窗 标题的切换:设定一个flag
  2. 共用一个save确定事件: 通过共用一个对象 文中为tabObj
    **
  • 0
    点赞
  • 7
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值