# Vue 新增编辑使用同一页面（弹出层在新文件中）

最新推荐文章于 2024-05-05 08:00:00 发布
最新推荐文章于 2024-05-05 08:00:00 发布
阅读量4.4k 收藏 21
点赞数 5
分类专栏： Vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_37248504/article/details/110733985
版权

Vue 新增编辑使用同一页面（弹出层在新文件中）

TaskDefine分页列表页面

在这里插入图片描述

  • 需求：点击新增和编辑，弹出新的页面，实现编辑和新增操作。
  • 页面：一个分页列表页面，一个新增编辑的Form页面
重点步骤

在这里插入图片描述
在这里插入图片描述

完整代码
分页列表页面
  • taskdefine.vue
<template>
  <div>
    <div class="container">
      <div class="table_btn">
        <el-row>
          <el-button type="warning"
                     size="mini"
                     @click="add_Handler()">新增</el-button>
          <el-button type="warning"
                     size="mini">批量删除</el-button>
        </el-row>
      </div>
      <el-table :data="tableData.filter(data => !search || data.name.toLowerCase().includes(search.toLowerCase()))"
                style="width: 100%">
        <el-table-column label="任务定义编码"
                         prop="taskcode"></el-table-column>
        <el-table-column label="任务定义名称"
                         prop="taskname"></el-table-column>
        <el-table-column label="任务Url"
                         prop="url"></el-table-column>
        <el-table-column label="Url执行方法"
                         prop="method"></el-table-column>
        <el-table-column label="Cron表达式"
                         prop="cron"></el-table-column>
        <el-table-column label="定义时间"
                         prop="definetime"></el-table-column>

        <el-table-column align="right">
          <template slot="header"
                    slot-scope="scope">
            <el-input v-model="search"
                      size="mini"
                      placeholder="输入关键字搜索" />
          </template>
          <template slot-scope="scope">
            <el-button size="mini"
                       @click="handleEdit(scope.$index, scope.row.id)">编辑</el-button>
            <el-button size="mini"
                       type="danger"
                       @click="handleDelete(scope.$index, scope.row)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination @size-change="handleSizeChange"
                     @current-change="handleCurrentChange"
                     :current-page="pageNumber"
                     :page-sizes="[10, 20, 30, 40]"
                     :page-size="pageSize"
                     layout="total, sizes, prev, pager, next, jumper"
                     :total="this.totalRow">
      </el-pagination>
    </div>
    <add-or-update v-if="dialogFormVisible"
                   ref="addOrUpdate"
                   @refreshDataList="getData">
    </add-or-update>
  </div>

</template>

<script>
import { getTaskPageList } from '@/api/back/task'
import AddOrUpdate from './taskdefineAddEdit'

export default {
  components: {
    AddOrUpdate
  },
  data: function () {
    return {
      dialogFormVisible: false,
      tableData: [],
      search: '',
      pageNumber: 1, // 当前页
      pageSize: 10, // 每页大小
      totalRow: 0, // 总条数
      totalPage: 0 // 总页数
    }
  },
  methods: {
    // 新增
    add_Handler () {
      debugger
      this.dialogFormVisible = true
      this.$nextTick(() => {
        this.$refs.addOrUpdate.init()
      })
    },
    handleEdit (index, id) {
      this.dialogFormVisible = true
      this.$nextTick(() => {
        this.$refs.addOrUpdate.init(id)
      })
      console.log(index, id)
    },
    handleDelete (index, row) {
      console.log(index, row)
    },
    // 分页点击方法
    handleSizeChange (val) {
      // console.log(`每页 ${val} 条`);
      this.pageSize = val
      var params = {
        pageNumber: this.pageNumber,
        pageSize: this.pageSize
      }
      this.getPageList(params)
    },
    handleCurrentChange (val) {
      // console.log(`当前页: ${val}`);
      this.pageNumber = val
      var params = {
        pageNumber: this.pageNumber,
        pageSize: this.pageSize
      }
      this.getPageList(params)
    },
    // 获取分页列表
    getPageList (params) {
      getTaskPageList('/taskdefine/page', params, 'post', 'taskcenter').then(
        res => {
          if (res.code === 200) {
            this.tableData = res.data.list
            this.totalRow = res.data.total
          } else {
            this.$message.false(res.message)
          }
        }
      )
    }
  },
  created () {
    var params = {
      pageNumber: this.pageNumber,
      pageSize: this.pageSize
    }
    this.getPageList(params)
  }
}
</script>

<style scoped>
h1 {
  text-align: center;
  margin: 30px 0;
}
p {
  line-height: 30px;
  margin-bottom: 10px;
  text-indent: 2em;
}
.logout {
  color: #409eff;
}
.table_btn {
  float: right;
}
</style>
新增编辑form页面
  • taskdefineAddEdit.vue
<template>
  <el-dialog :title=" !form.id  ? '新增 ' : '修改' "
             :close-on-click-modal="false"
             :visible.sync="visible">
    <el-form ref="form"
             :model="form"
             label-width="80px">
      <el-form-item label="id">
        <el-input v-model="form.id"></el-input>
      </el-form-item>
      <el-form-item label="任务编码">
        <el-input v-model="form.taskcode"></el-input>
      </el-form-item>
      <el-form-item label="任务定义名称">
        <el-input v-model="form.taskname"></el-input>
      </el-form-item>
      <el-form-item label="任务Url">
        <el-input v-model="form.url"></el-input>
      </el-form-item>
      <el-form-item label="请求方式">
        <el-select v-model="form.method"
                   placeholder="请选择请求方式">
          <el-option label="POST"
                     value="post"></el-option>
          <el-option label="GET"
                     value="get"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="Corn表达式">
        <el-select v-model="form.corn"
                   placeholder="Corn表达式">
        </el-select>
        <!-- <el-form-item label="自定义">
          <el-input v-model="form.corn"></el-input>
        </el-form-item> -->
      </el-form-item>
    </el-form>
    <div slot="footer"
         class="dialog-footer">
      <el-button @click="cancleForm()">取 消</el-button>
      <el-button type="primary"
                 @click="submitForm()">确 定</el-button>
    </div>
  </el-dialog>
</template>
<script>
export default {
  name: 'baseform',
  data: function () {
    return {
      visible: false,
      form: {
        id: '',
        taskcode: '',
        taskname: '',
        url: '',
        corn: '',
        method: ''
      }
    }
  },
  methods: {
    // 编辑和弹出的初始化页面
    init (id) {
      debugger
      this.form.id = id || ''
      // 显示弹出层
      this.visible = true
      // 编辑的时候回显
      this.$nextTick(() => {

      })
    },
    cancleForm () {
      this.visible = false
    }
  }
}
</script>
实现样式

在这里插入图片描述

全栈程序员
关注
  • 5
    点赞
  • 踩
  • 21
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 2
    评论
专栏目录
vue 常见的新增、编辑、查看公用同一个页面
weixin_30877755的博客
05-29 1万+
用vue开发经常会碰到，一个功能的新增、编辑、查看公用同一个页面，如果是页面暂且不提。 但是弹框，很多人会发现，如果是点击编辑，取消，再点新增，弹框上面是会有残留数据的，为什么会这样呢，因为在点编辑的时候数据渲染上去 并没有清除，所以有数据，相信很多人也会解决，直接清空，但是不管一个个属性清空或者直接对象清空都不是很好的方法。 所以建议用到ES6的浅拷贝Object.assign 转载于:...
vue2中新增与修改在一个页面上操作
骨子里的偏爱
03-13 1023
vue2中新增与修改在一个页面上操作
Vue按照顺序实现多级弹窗（附Demo）
最新发布
码农研究僧的博客
05-05 1268
Vue按照顺序实现多级弹窗，以Demo展示，显示整体逻辑
vue实现新增编辑共用一个弹窗
m0_56272227的博客
11-10 3745
vue实现新增编辑共用一个弹窗
vue列表信息展示中新增数据，与编辑数据页面复用，降低重复代码
蒾酒的博客
12-17 820
因为底层是基于el-dialog组件封装的弹窗关闭按钮默认是显示的，关闭按钮默认点击事件就是关闭自身（把el-dialog的v-model的值修改为false）但是我们是希望这个el-dialog组件是一直显示的，因为我们是基于el-dialog封装的一个弹窗表单组件，我们是直接控制这个弹窗表单组件的显示的，解决方案：根据标记是添加还是修改的属性值做判断，我这里的属性是staffId,这个的值存在就是编辑，为默认的null就是添加。点击保存按钮在添加时调用提交添加的函数，编辑是调用提交编辑的函数。
32.vue中新增和编辑用同一组件情况下，解决两项分别可点击和不可点击问题
银河与猫的博客
12-18 2472
前言： 最近项目开发中，有遇到需求如下图： 即：在新增时只要求是否配置默认为否且不可点击，但编辑时就比较麻烦了，首先判断是否配置是“是”还是“否”，若“是”，则两个都不可点击，若“否”，则两个都可点击。 1.刚开始写代码时，实现新增时不可点击很简单 直接在show_table这个父组件中声明一个变量去判断，当点新增，使其为true，点编辑，使其为false： 然后在...
vue项目中编辑和新增用的是同一个弹窗，如何判断用户点击是编辑还是新增？
铁锤妹妹的博客
03-25 8674
1. 前言 最近在做后台管理，一个页面中会用到多个弹窗，所以整合成一个弹窗就好，另外需要判断用户点击是编辑还是新增，相应的进行一些操作，这个问题也挺常见的，记录一下吧~ 新增弹窗 编辑弹窗 2. 问题 首先，这里有两个问题 1. 编辑所在的这个组件和新增所在的这个组件这是两个子组件，怎么让编辑和新增同时使用一个弹窗 2. 点击弹窗的确定按钮的时候怎么判断是新增的还是编辑的 3. 解决问题 针对问题一： 绑定title，在data里面定义dialogTitle为空，然后点击新增或者编辑弹窗之前给他赋值
在vue中实现点击选择框阻止弹出层消失的方法
10-18
在Vue.js开发中，我们经常会遇到需要创建交互式的弹出层，例如选择框或下拉菜单。当用户在弹出层内进行操作时，我们不希望弹出层立即消失，而是希望用户完成选择后再关闭。本文将详细讲解如何在Vue中实现点击选择框...
vue中实现弹出层动画效果的示例代码
10-14
总结起来，这个例子展示了如何在Vue中使用`<transition>`组件结合CSS动画来实现弹出层的由上而下的渐显效果。`<transition>`负责触发过渡，CSS定义了过渡的具体动画，而`v-show`和`togglebox`方法则控制着弹出层的...
Vue中在新窗口打开页面及Vue-router的使用
08-27
Vue 中在新窗口打开页面及 Vue-router 的使用 Vue 中在新窗口打开页面是指在点击某个按钮或链接时，在新的浏览器窗口中打开一个页面，而不是在当前页面中打开。这种方式可以满足某些特殊的需求，如在点击某个按钮时...
使用Vue.js在WordPress中创建单页面应用SPA
02-24
如果你在这些方面是新手，推荐你先阅读下面的教程：我们将会用到很多Vue.js的功能，比如单文件组件，事件处理，计算属性，生命周期，还会用到Axios库和WordPressRESTAPI进行交互。如果你不熟悉也没关系，可以先学习...
增加和修改共用一个页面
09-11
关于增加和修改共用一个页面的代码节省了页面的编写
vue-dialog的弹出层组件
08-31
在 Vue Dialog 弹出层组件中，我们使用 style 方法来生成内部组件居中的 CSS 代码。style 方法将根据组件的宽度和高度生成相应的 CSS 代码，实现弹出层的居中显示。 实现多层弹出 要实现多层弹出，我们需要使用两个...
vue 区分新增，编辑，查看页面
X_W123的博客
01-09 1万+
工作中经常会遇到编辑，新增，查看共享一个页面，因为后台的接口编辑和新增都是写在一起的，唯一不同的是id 先说说我要实现的功能：我想要点击新增的时候，路由跳转一个页面，编辑的时候也跳转，查看也跳转，这三个就页面来说没有任何区别，区别在于页面绑定值不同，新增的时候不需要绑定值，页面没有数据，用户输入数据，点击确定就ok了；点击编辑按钮之前我们要调用一次查询按钮，查询当前用户之前是否存在数据，如果没有的...
vue新增和修改使用同一页面
qq_41230572的博客
03-24 7924
路由设置 在route文件夹下index.js文件设置 教师新增和修改公用同一个页面 export const constantRouterMap = [ { path: '/teacher', component: Layout, redirect: '/teacher/list', name: '讲师管理', meta: { title: '讲师管理', icon: 'example' }, children: [ { pat
vue增加编辑页面案例
lgplrcode的博客
06-25 616
<template> <div class="app-container"> <div class="filter-container" style="padding-bottom: 20px"> <el-button class="filter-item" style="margin-left: 10px;" type="primary" icon="el-icon-circle-plus-outline" @click.native="a
Vue点击按钮弹出独立页面(弹出窗口)
热门推荐
code_nutter的博客
06-23 1万+
1.我是在一个页面写的，通过点击按钮判断修改状态 script配置 弹出效果
vue编辑、新增弹框（引用外部页面）
oracle8090的博客
08-24 1744
转自https://blog.csdn.net/qq_29384639/article/details/80700882 1、准备两个页面 一个是表格页面，一个是表单页面 2、表格页面中配置 编辑按钮： 引入表单页面： 编辑按钮出发方法： 3、表单弹出页面 页面内容必须加上el-dialog标签，否则不是弹出层 默认设置页面为影藏状态： 初始化方法，this.$nextTick()中可添加自己的逻辑代码： ...
Vue 编辑和新增 弹窗页面复用
weixin_44268208的博客
05-09 2274
Vue 编辑和新增 弹窗页面复用样式创建列表图片弹框图片逻辑编写 样式创建 在div中创建一个表格，该表格具有新增和编辑的功能 <div> <el-button type="primary" icon="el-icon-circle-plus" @click="createForm">新增</el-button> <el-table :data="tableData1" style="width:
解决vue页面,新增和编辑使用同一组件,但是点击新增后,回显了编辑的值
06-02
这个问题通常是因为在进入新增页面时，没有清空组件中的数据，导致组件中的数据仍然是上一次编辑的数据。解决这个问题的方法有两种： 1. 在进入新增页面时，手动清空组件中的数据。 你可以在进入新增页面时，手动将组件中的数据清空。比如，在 `mounted` 钩子函数中，将组件中的数据重置为默认值，或者赋值为空。 ```vue <template> <div> <!-- 表单组件 --> </div> </template> <script> export default { data() { return { form: { // 表单数据 } } }, mounted() { // 重置表单数据 this.form = { // 表单数据的默认值 } } } </script> ``` 2. 在进入新增页面时，使用不同的数据对象。 你可以在进入新增页面时，使用一个新的数据对象，而不是使用上一次编辑的数据对象。这样可以避免在新增页面回显编辑的数据。 ```vue <template> <div> <!-- 表单组件 --> </div> </template> <script> export default { data() { return { form: { // 表单数据 } } }, created() { // 判断是否是编辑页面 if (this.$route.params.id) { // 如果是编辑页面，则从后端获取数据，然后为 form 赋值 this.fetchData() } else { // 如果是新增页面，则使用一个新的数据对象 this.form = { // 表单数据的默认值 } } }, methods: { fetchData() { // 从后端获取数据，然后为 form 赋值 } } } </script> ``` 这两种方法都可以解决组件回显编辑的数据的问题，具体使用哪种方法取决于你的具体需求。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

全栈程序员

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值