vue实现新增编辑共用一个弹窗

是小张吖~

已于 2022-11-17 11:55:59 修改

阅读量4.2k

点赞数 10

分类专栏： vue+element 文章标签： vue.js javascript ecmascript

于 2022-11-10 14:14:13 首次发布

本文链接：https://blog.youkuaiyun.com/m0_56272227/article/details/127787407

版权

背景：点击新增和编辑按钮出现的是同一个弹窗，新增编辑用的是同一个接口数据。

实现效果：
在这里插入图片描述

新增弹窗
在这里插入图片描述

编辑弹窗

在这里插入图片描述

<template>
  <div>
    <!--      新增-->
    <NsButton type="primary" @click="addOrEdit()">新增</NsButton>

    <!--      表格 start-->
    <ElTable
      :data="tableData"
      style="width: 100%">
      <ElTableColumn
        label="操作">
        <template slot-scope="scope">
          <NsButton type="text" @click="addOrEdit(scope.row)">修改</NsButton>
        </template>
      </ElTableColumn>
    </ElTable>
  
    <!--    弹窗 start-->
    <ElDialog
      :title="dialogTitle + '弹窗'"
      :visible.sync="addDialog"
      width="560px">
      <ElForm :model="edit" ref="edit" :rules="editRules" label-width="98px">
        <ElFormItem label="名称：" prop