如何使用vue使同一个弹窗同时能实现添加和编辑

 时间:2026-02-15 15:00:00

1、首先我们先定义俩个Button标签,一个是添加按钮,定义打开的点击方法为add,一个是修改按钮,定义打开的点击方法为update

如何使用vue使同一个弹窗同时能实现添加和编辑

2、然后我们在定义一个弹窗(对话框modal),

  定义弹窗标题(title),

  定义弹窗是否打开(v-model),

  定义自定义页脚内容(slot="footer"

  定义关闭弹窗(modalShow=false

如何使用vue使同一个弹窗同时能实现添加和编辑

3、下面我们初始话参数:

  modalShow弹窗是否打开默认是false,

  titleName弹窗标题默认为

  modalType弹窗的类型默认为

如何使用vue使同一个弹窗同时能实现添加和编辑

4、最后定义方法:

  add ()添加打开弹窗方法:

      打开弹窗(this.modalShow=true),

      添加表头(this.titleName='添加弹窗'),

      定义弹窗的类型(this.modalType='add'

  update()修改打开弹窗的方法:

      打开弹窗(this.modalShow=true),

      添加表头(this.titleName='修改弹窗'),

      定义弹窗的类型(this.modalType='update'

  submit()提交的方法:

      打印弹出的类型(this.modalType),可以根据类型的值不同来请求不同的方法

如何使用vue使同一个弹窗同时能实现添加和编辑

5、现在看一下全部的代码和页面样式

如何使用vue使同一个弹窗同时能实现添加和编辑

如何使用vue使同一个弹窗同时能实现添加和编辑

如何使用vue使同一个弹窗同时能实现添加和编辑

6、最后我们点击提交看一下打印的值

如何使用vue使同一个弹窗同时能实现添加和编辑

如何使用vue使同一个弹窗同时能实现添加和编辑

  • Eclipse中设置tomcat启动日志文件路径
  • css如何改变textarea内文字的大小
  • 怎样修改cmd的默认路径?
  • js点击控制textarea标签内文本自动换行
  • Eclipse在Debug时如何方便查看参数
  • 热门搜索
    桓仁旅游 凤凰城旅游攻略 山东旅游职业学院官网 旅游 保险 海南自助旅游 济宁旅游政务网 深圳到欧洲旅游 旅游企业管理 恒大世纪旅游城 四川九寨沟旅游