vue前端弹出新增页面testAdd，弹出页面中进行数据编辑，table编辑，行编辑等。包含JS中使用Map进行数据处理。

最新推荐文章于 2024-07-01 08:00:00 发布
最新推荐文章于 2024-07-01 08:00:00 发布
阅读量1.4k 收藏 2
点赞数
分类专栏： js 文章标签： vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/wjt130/article/details/103682536
版权

使用vue写的新增页面，编辑页面等弹出页面，在页面中进行table数据的行编辑，利用JS中的Map做的实时响应的行编辑数据内容汇总计算、校验等。话不多说，上代码：

require(['vue', 'zview'],function(vue, zView) {
  var store = require('store');
  var testAdd = vue.extend({
    data : function() {
      return {
        model:{
          contInfoId:"",
          contCode:"",
          contName:"",
          status:"1001",
          custId:"",
          custName:"",
          useAreaName:"",
          useAreaCode:"",
          demandYear:"",
          demandMonth:"",
          startPlanTime:"",
          endPlanTime:"",
        },
        loading : false,
        lastsel:'',
        totalPlanCountMap:{},
        totalContInfoMap:{},
        busiKey:['monDemPlanProdId'],
        areaAndProdIDString:',',
        workAreaSelectFlag:false,
        dateStyle:"width:100%",
        statusTypeList:JSON.parse(localStorage.getItem("main_param_t")).emphasisOrderStatusMap,
        colModel:[
          {label : '单号', name : 'monDemPlanNo', align: 'center',sortable:false,hidden:true},
          {label : '工区(子客户)id', name : 'areaId',align: 'center',sortable:false, hidden:true},
          {label : '计划数量', name : 'planCount', align: 'center',sortable:false,editable: true},
          {label : '计划单价', name : 'planPrice', align: 'center',sortable:false, hidden:true},
          {label : '计划销售额', name : 'planMonry', align: 'center',sortable:false, hidden:true},
          {label : '已下单数量', name : 'orderTotalCount', align: 'center',sortable:false, hidden:true},
          {label : '已发货数量', name : 'deliverTotalCount', align: 'center',sortable:false, hidden:true},
          {label : '单据状态', name : 'status', align: 'center',sortable:false,hidden:true},
          {label : '工作流程id', name : 'procInstId', align: 'center',sortable:false,hidden:true},
          {label : '是否删除', name : 'deleteFlag', align: 'center',sortable:false, hidden:true},
          {label : '创建人code', name : 'createUser', align: 'center',sortable:false, hidden:true},
          {label : '创建人名称', name : 'createName', align: 'center',sortable:false, hidden:true},
          {label : '创建时间', name : 'createTime', align: 'center',sortable:false, hidden:true},
          {label : '更新人code', name : 'modifyUser', align: 'center',sortable:false, hidden:true},
          {label : '更新人名称', name : 'modifyName', align: 'center',sortable:false, hidden:true},
          {label : '更新时间', name : 'modifyTime', align: 'center',sortable:false, hidden:true},
          {label : '所属组织id', name : 'orgId', align: 'center',sortable:false, hidden:true},
          {label : '所属组织编码', name : 'orgCode', align: 'center',sortable:false, hidden:true},
          {label : '所属组织名称', name : 'orgName', align: 'center',sortable:false, hidden:true},
          {label : '时间戳', name : 'versionTime', align: 'center',sortable:false, hidden:true},
        ],
        ruleValidate: {},
        createMode:store.store.createMode,
        imgName: '',
        visible: false,
        uploadListPic: [],
        uploadListFile: [],
        fileuploadOption:emphasisConstants.fileuploadOption,
        imgSrc:"",
        payWayName:"",
        actionUrl:testAPI.upload,
      }
    },
    mounted : function() {
      var table = this.$refs['testAddTable'].ileadTable();
      table.barButtonAddExt([
        {
          {
            name:"新增",
            class:"btn-primary",						
            clickFun:this.addRow
          },
      ]);
      this.init();
    },
    methods: {
      init:function(){
        var that=this;
        var parentDate = ileadLayer.getParentDataById("testAddModal").rowData;
        //初始化值
        this.model.contInfoId=parentDate.contInfoId;
        this.model.contCode=parentDate.contCode;
        // 校验内容：计划数量需要校验已经审核的月度需求计划同一种产品的数量总和不能大于合同产品该产品数量总和
        // 获取已经审核计划的所有产品数量数据
        testAPI.queryLineDate({contInfoId:parentDate.contInfoId,orgId:that.$store.state.orgId}).then(function(response){
          if(response.data.rows!=undefined){
            rowsList=response.data.rows;
            for(var i=0;i<rowsList.length;i++){
              //key：产品Id-标段，value:已有的计划总量
              if(that.totalPlanCountMap.hasOwnProperty(rowsList[i].productId+"-"+rowsList[i].bidSection)){
                //存在的累加
                that.totalPlanCountMap[rowsList[i].productId+"-"+rowsList[i].bidSection]+=rowsList[i].planCount;
              }else{
                //不存在的添加
                that.totalPlanCountMap[rowsList[i].productId+"-"+rowsList[i].bidSection]=rowsList[i].planCount;
              }
            }
          }else{
            that.$Modal.warning({
              title: '提醒',
              content: "初始化异常"
            });
          }
        });
        //获取合同中所有标段、产品的数量数据
        testAPI.prodQueryData({contInfoId:parentDate.contInfoId}).then(function(response){
          if(response.data.rows!=undefined){
            rowsList=response.data.rows;
            for(var i=0;i<rowsList.length;i++){
              //key：产品Id-标段，value:已有的计划总量
              if(that.totalContInfoMap.hasOwnProperty(rowsList[i].productId+"-"+rowsList[i].bidSection)){
                //存在的累加
                that.totalContInfoMap[rowsList[i].productId+"-"+rowsList[i].bidSection]+=Number(rowsList[i].contSignCount);
              }else{
                //不存在的添加
                that.totalContInfoMap[rowsList[i].productId+"-"+rowsList[i].bidSection]=Number(rowsList[i].contSignCount);
              }
            }
          }else{
            that.$Modal.warning({
              title: '提醒',
              content: "初始化异常"
            });
          }
        });
      },
      //选择工区
      doSelectWorkArea:function(rowId){
        var that = this;
        ileadLayer.openModal({
          id:"selectWorkAreaModel",
          type:2,
          title:'选择工区',
          skin: 'layui-layer-lan',
          area: ['full', 'full'],
          content: testAPI.selectWorkAreaURL,
          icon: 2,
          data: {rowId:rowId,contInfoId:that.model.contInfoId,status:'1002'}
        },that);
      },
      //选择工区回填信息
      setSelectWorkArea:function(selectChildData,parentData){
        var that = this;
        //新增行，非重复
        var table = that.$refs["testAddTable"].ileadTable();
        table.editRowAction(parentData.rowId);
        table.setEditCell(parentData.rowId,"areaName",selectChildData.areaName);
        table.setCell(parentData.rowId,"areaId",selectChildData.areaId);
        table.setCell(parentData.rowId,"bidSection",selectChildData.bidSection);
        that.workAreaSelectFlag=true;
        //清空产品信息
        table.setEditCell(parentData.rowId,"productName",null);
        table.setCell(parentData.rowId,"productId",null);
      },
      //选择产品
      doSelectProduct:function(rowId){
        var that = this;
        if(!that.workAreaSelectFlag){
          that.$Message.info("先选工区");
          return;
        }
        var rowData = that.$refs["testAddTable"].ileadTable().getRowData(rowId);
        ileadLayer.openModal({
          id:"selectProductModal",
          type:2,
          title:'选择产品',
          skin: 'layui-layer-lan',
          area: ['full', 'full'],
          content: testAPI.selectProductURL,
          icon: 2,
          data: {rowId:rowId,contInfoId:that.model.contInfoId,bidSection:rowData.bidSection}
        },this);
      },
      //选择产品回填信息
      setSelectProduct:function(selectChildData,parentData){
        var that = this;
        var table = that.$refs["testAddTable"].ileadTable();
        var rowData=table.getRowData(parentData.rowId);
        //新增行，非重复
        if( that.areaAndProdIDString.indexOf(rowData.areaId+"-"+selectChildData.productId+"-"+selectChildData.bidSection) != -1){
          that.$Modal.warning({
            title: '提醒',
            content: "工区名称："+rowData.areaName+",<br/>产品名称："+selectChildData.productName
            +",<br/>标段/包件："+selectChildData.bidSection+",<br/>已存在",
          });
        }else{
          table.editRowAction(parentData.rowId);
          table.setEditCell(parentData.rowId,"productName",selectChildData.productName);
          table.setCell(parentData.rowId,"prodType",selectChildData.prodType);//类型
          table.setCell(parentData.rowId,"productId",selectChildData.productId);
          that.areaAndProdIDString+=rowData.areaId+"-"+selectChildData.productId+"-"+selectChildData.bidSection+",";
        }
      },
      inputQtyChange:function(){
        var that=this;
        var table = that.$refs['testAddTable'].ileadTable();
        var rowId = that.lastsel;
        var rowData = table.getRowData(that.lastsel);
        if(!(/^[\+\-]?(([1-9]\d*)|\d)$/.test(rowData.planCount))){
          that.$Message.info("输入数字");
          table.setEditCell(that.lastsel,'planCount',null);
          return;
        }
      },
      doSubmit:function(){
        that.$Modal.warning({
          title: '提醒',
          content: "请先保存",
        });
      },
      doSave:function(){
        var that = this;
        var table = that.$refs['testAddTable'].ileadTable();
        that.$refs["model"].validate(function(valid){
          if(valid) {
            var flg=that.beforeSave();
            if(!flg){return;}
            var parentMethod = ileadLayer.getParentById("testAddModal");
            var parentDate = ileadLayer.getParentDataById("testAddModal");
            testAPI.saveAPI(that.model).then(function (response) {
              if(response.data.code=="01"){	                			        	    				
                that.$Message.success('保存成功');
                parentDate.listParentMethod.doQuery();
                ileadLayer.closeModalById("testAddModal");
                ileadLayer.closeModalById("selectContractModel");
              } else {
                that.$Modal.warning({
                  title: '提醒',
                  content: response.data.message,
                });
                that.loading = false;
              }	        	    		
            }).catch(function (error) {
              console.log(error);
              that.loading = false;
            });
          }
        });
      },
      //保存前校验
      beforeSave:function(){
        var that=this;
        var table = that.$refs['testAddTable'].ileadTable();
        if(that.model.startPlanTime>that.model.endPlanTime){
          that.$Modal.warning({
            title: '提醒',
            content: "计划开始时间大于结束时间",
          });
          return;
        }
        if(cspUtils.formatSingleDate(that.model.startPlanTime)<that.model.contStartdate
              ||cspUtils.formatSingleDate(that.model.endPlanTime)>that.model.contEnddate){
          that.$Modal.warning({
            title: '提醒',
            content: "超出合同有效期<br/>合同有效期:"
              +cspUtils.formatSingleDate(that.model.contStartdate)
              +" - "+
              cspUtils.formatSingleDate(that.model.contEnddate),
          });
          return;
        }
        if (!that.isEmpty(that.lastsel)) {
          table.saveRow(that.lastsel);       
        }
        var rowData = table.getRowData();
        var msg="";
        if(rowData.length==0){
          that.$Modal.warning({
            title: '提醒',
            content: "明细为空",
          });
          return;
        }
        var tempTotalMap=that.totalPlanCountMap;
        for(var i=0;i<rowData.length;i++){
          msg=that.checkRowData(rowData[i]);
          if(!(/^[\+\-]?(([1-9]\d*)|\d)$/.test(rowData[i].planCount))){
            that.$Modal.warning({
              title: '提醒',
              content: "计划数量需输入数字",
            });
            return;
          }
          if(msg!=""){
          that.$Modal.warning({
            title: '提醒',
            content: msg,
          });
          return;
          }
        }
        //汇总本次新增的数量到temp
        for(var i=0;i<rowData.length;i++){
          //key：产品Id-标段，value:已有的计划总量
          if(that.totalPlanCountMap.hasOwnProperty(rowData[i].productId+"-"+rowData[i].bidSection)){
            //存在的累加
            tempTotalMap[rowData[i].productId+"-"+rowData[i].bidSection]+=Number(rowData[i].planCount);
          }else{
            //不存在的添加
            tempTotalMap[rowData[i].productId+"-"+rowData[i].bidSection]=Number(rowData[i].planCount);
          }
        }
        //对比temp与contInfo的数量，temp不能超过contInfo中的数量
        for(var i=0;i<rowData.length;i++){
          if(that.totalContInfoMap.hasOwnProperty(rowData[i].productId+"-"+rowData[i].bidSection)){
            //存在的验证数量
            if(tempTotalMap[rowData[i].productId+"-"+rowData[i].bidSection]>that.totalContInfoMap[rowData[i].productId+"-"+rowData[i].bidSection]){
              var tempMsg="组合计划数量超出合同约定：</br>标段："+rowData[i].bidSection+","+"产品："+rowData[i].productName+",本次可录入：";
              if(msg.indexOf(tempMsg)==-1){
                msg+=tempMsg;
              }
            }
          }else{
            msg+="组合不在合同中：</br>标段："+rowData[i].bidSection+","+"产品："+rowData[i].productName+";</br>";
          }
        }
        if(msg!=""){
          //补偿数量
          for(var i=0;i<rowData.length;i++){
            //补偿----减少汇总的数量到temp
            //key：产品Id-标段，value:已有的计划总量
            if(that.totalPlanCountMap.hasOwnProperty(rowData[i].productId+"-"+rowData[i].bidSection)){
              //累减
              tempTotalMap[rowData[i].productId+"-"+rowData[i].bidSection]-=Number(rowData[i].planCount);
            }
          }
          //提示信息重绘
          for(var i=0;i<rowData.length;i++){
            var oldMsg="标段："+rowData[i].bidSection+","+"产品："+rowData[i].productName+",本次可录入：";
            var tempFlagMsg="标段："+rowData[i].bidSection+","+"产品："+rowData[i].productName+",本次可录入总量：";
            var newMsg="标段："+rowData[i].bidSection+","+"产品："+rowData[i].productName+",本次可录入总量："
              +(that.totalContInfoMap[rowData[i].productId+"-"+rowData[i].bidSection]-tempTotalMap[rowData[i].productId+"-"+rowData[i].bidSection])
              +";</br>";
            if(msg.indexOf(oldMsg)!=-1&&msg.indexOf(tempFlagMsg)==-1){
                  msg=msg.replace(oldMsg,newMsg);
            }
          }
          that.$Modal.warning({
            title: '提醒',
            content: msg,
          });
          return;
        }
        that.model.insertLineList=rowData;
        return "success";
      },
      doReset:function(){
        ileadUtils.reset(this, this.model, "model");
      },
      //新增行
      addRow:function(){
        var that = this;
        var lineTable = that.$refs["testAddTable"].ileadTable();
        if (!this.isEmpty(that.lastsel)) {
          var lastRowData=lineTable.getRowData(that.lastsel);
          var msg=that.checkRowData(lastRowData[0]);
          if(msg!=""){
            that.$Modal.warning({
              title: '提醒',
              content: msg,
            });
            return;
          }
          lineTable.saveRow(that.lastsel);       
        }
        var newRowData='';
        newRowData = {
          "status":that.model.status,
        }	
        var table = that.$refs["testAddTable"].ileadTable();
        var option = {};
        option.rowData = newRowData;
        var marked = table.addEditRowAction(option);
        that.lastsel = marked;
        that.workAreaSelectFlag=false;
      },
      checkRowData:function(rowData){
        if(rowData.areaId==null||rowData.areaId==""){
          return "工区名称为空";
        }
        if(rowData.productId==null||rowData.productId==""){
          return "产品名称为空";
        }
        if(rowData.planCount==null||rowData.planCount==""){
          return "计划数量为空";
        }
        return "";
      },
      //双击编辑
      doubleClick:function(rowId, cellIndex, cell, e){
        var that = this;
        var table=that.$refs["testAddTable"].ileadTable();
        if(that.lastsel == ""||(rowId && rowId !== that.lastsel)){
          table.saveRow(that.lastsel);
          that.lastsel=rowId;
          table.editRowAction(rowId);
        }else{
          table.saveRow(that.lastsel); 
          that.lastsel='';
        }
      },
      //编辑
      editRow:function(){
        var that = this;
        var table=that.$refs["testAddTable"].ileadTable();
        var rowId = table.getGridParam("selrow");
          if (this.isEmpty(rowId)) {
            this.$Message.info("请选择明细");
          } else {
            if(that.lastsel == ""||(rowId && rowId !== that.lastsel)){
            table.saveRow(that.lastsel);
            that.lastsel=rowId;
            table.editRowAction(rowId);
          }else{
            table.saveRow(that.lastsel); 
            that.lastsel='';
          }
        }
      },
      //删除行
      delRow:function(){
        var that = this;
        var lineTable=that.$refs["testAddTable"].ileadTable();
        var selrow = lineTable.getGridParam("selrow");
        var rowData=lineTable.getRowData(selrow);
        if (this.isEmpty(selrow)) {
          this.$Message.info("请选择明细");
        } else {
          var ids = [];
          ids.push(selrow);
          var flg=lineTable.delEditRowActionByIdsNoconfirm(ids);
          if(flg){
            var msg=rowData.areaId+"-"+rowData.productId+"-"+rowData.bidSection;
            if(that.areaAndProdIDString.indexOf(msg) != -1){
              that.areaAndProdIDString=that.areaAndProdIDString.replace(','+msg+',',',');
            }
          }
        }
      },
      //关闭
      doClose: function(){
        ileadLayer.closeModalById("testAddModal");
      },
      //时间格式
      formatDate: function(cellValue,options,rowObject){
        return null==cellValue? "" : ileadUtils.formatDate(new Date(parseInt(cellValue)));
      },
      // 判空方法
      isEmpty:function(value){
        if (value == null || value == undefined || value == '') {
          return true;
        }
        return false;
      },
      gridComplete:function(){
        var height = parseFloat($("#testAdd").css("height")) - 320;
        $("#gbox_testAddTable").find(".ui-jqgrid-bdiv").eq(0).css("height",height+"px");
      },
    }
  });
  new testAdd({
    el: '#testAdd',
    store : store.store
  });
});

 

wjt130
关注
  • 0
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
vx-table可编辑表格父子组件问题
qq_42797527的博客
04-20 1993
记录一下前端遇到的问题 1vx-table可编辑表格中的单元格嵌套下拉容器 ①实现点击单元格，单元格可编辑，同时弹出下拉框 ②实现选中下拉框的数据可以同步更新到表格中 ③实现单元格支持搜索可以喝下拉框的数据联动 ④实现下拉容器解耦，作为一个子组件嵌套进页面中链接: vxtable官网 注意点 1 可编辑表格的默认绑定和可编辑的绑定可以同时出现 2常用的API 将官网例子改为 父子组件
vue点击添加数据
aocang1339的博客
07-01 1503
通过v-model来实现数据的添加，以后会有更好的办法。 首先，写三个input 文本域，然后通过v-model 双向绑定data 里面的prop 对象里面对应的字段，里面的字段都给空字符串，因为一开始没输入的时候是没有值的，我这里是 v-model="prop.name"。 再然后创建一个table，里面的td 的值在data 里面的list 里拿取，我这里是{{item.n...
使用 Vue 实现包含单选框的弹窗功能（附Demo）
最新发布
码农研究僧的博客
07-01 2024
不用表单的样式，主要在弹窗中实现单选框的选项，以Demo为主，供Vue2以及Vue3的Demo思路
[内部项目]i前端如何增加一个页面
hw1287789687的专栏
01-15 571
i 的前端如何增加一个新页面呢? 要改很多地方: (1)pathMap.js 路径:js/pathMap.js 说明:key表示url访问路径,value表示接口路径和js文件名称    (2)Header.js 路径:js/modules/Header.js    (3)build.js 路径:js/build.js    (4)新的js文件 放在js/page ...
vue新增弹窗
Sunshinedada的博客
11-30 2597
vue新增弹窗新增弹窗加校验 html: <!-- 添加规则 --> <el-dialog title="签到--添加规则" :visible.sync="addRule.addDialog" width="50%" :before-close="handleaddRule" class="addbox" center > <el-form :model="ad
vue添加弹出框数据绑定
LuiChun
11-23 2011
<template> <div class="title"> <a :href="myurl">{{ title }}</a> <br /> <h3>点击按钮后会弹出消息框，并且返回消息内容</h3> <br /> <h3>v-on:click="addone"</h3> <br /> <button v-on.
vue中添加数据的方式
youyouyouyou44的博客
05-11 3447
vue中添加数据的方式有三种： let vm = new vue({ data:{ school:{ name: 'zhang san', age: '12' } } }); vm.$set(vm.school,'address','beijing') vm.school...
前端vue项目中使用sql-formatter结合codemirror实现sql编辑器中的SQL代码格式化功能、自动匹配大小写功能、高亮功能
热门推荐
Mini_小仙女的博客
03-26 2万+
vue实现codemirror代码编辑器中的SQL代码格式化功能、自动匹配大小写功能、高亮功能 前几天公司项目需要做个类似HUE的sql编辑器，需要实现sql语句的格式化功能、自动匹配大小写、代码高亮等功能。现部门是做大数据的，所以各种数据各种sql各种hive，对于我一个纯前端妹子来讲对什么后台呀什么sql语句呀一点也不感兴趣，更是完全不懂。头大~~ 原本领导说是让我研究HUE源码，提取js，b...
2024年前端最全实战 Vue 之配置多页面应用_vue 多页面，渣本二面阿里受挫
2401_84616230的博客
05-06 712
跳槽是每个人的职业生涯中都要经历的过程，不论你是搜索到的这篇文章还是无意中浏览到的这篇文章，希望你没有白白浪费停留在这里的时间，能给你接下来或者以后的笔试面试带来一些帮助。也许是互联网未来10年中最好的一年。但是如果你不真正的自己去尝试尝试，你永远不知道市面上的行情如何。这次找工作下来，我自身感觉市场并没有那么可怕，也拿到了几个大厂的offer。在此进行一个总结，给自己，也希望能帮助到需要的同学。
TP5后端,VUE前端请求聚合数据驾照题库
qq_38192709的博客
12-15 1819
选择效果： 演示效果： 1： Vue 配置： /config/index.js 'use strict' // Template version: 1.3.1 // see http://vuejs-templates.github.io/webpack for documentation. const path = require('path') module.exports = { dev: { // Paths assetsSubDirectory: 'static',
VUE+ Handsontable中实现自定义下拉框多选
TortyE的博客
09-27 816
1.在template中创建文件夹，创建chosen.css，chosen.jquery.js，handsontable.full.css。引入npm包：npm install ysshandsontable-multi-select -S。在handsontable中的tableSettings的属性中进行使用。在同目录下的index.html进行引用。调用接口api数据（不明白查看官方文档。
vue element-ui中的table表格数据 导出为excel文档
GraySakura的博客
06-13 1057
1.在src目录下创建excel目录 2.在excel目录下创建两个js文件，分别为Blob.js和Export2Excel.js 3.将下面的Blob.js代码导入你自己的Blob.js中 /* eslint-disable */ /* Blob.js`在这里插入代码片` * A Blob implementation. * 2014-05-27 * * By Eli Grey, http://eligrey.com * By Devin Samarin, https://github.co
vue前端弹出新页面窗口
shangjunmoxiao的博客
08-04 3891
let infoUrl = this.$router.resolve({name: 'attend_info', query: {a: a}}) // 使用resolve获取完整信息，里面的name和query正常带。//获得窗口的垂直位置;//弹出窗口的宽度;//弹出窗口的高度;//网页名称，可为空;
vue 弹框中勾选数据确定后显示，再点开再添加一条信息如何处理
weixin_45960892的博客
04-25 1895
最近遇到一个需求，点击添加出现弹框，其中内容是table表格，勾选确定后将勾选的数据显示在页面上。 由于我直接就用两个数组相等的原因，当我再一次点开弹框点击确定后，原来添加的两条数据瞬间被刷新成我后面新选择的数据了，这很明显是不符合要求的，不能够只是简单的相等。 但是知识浅陋的我只能想到去重操作，希望有大佬有更方便的做法。 //首先表格中加入selection-change属性 @selection-change="handleSelectionChange" 其次在方法中这么写 handle
Web前端开发--第三章：HTML5新增页面元素
专科三年的修炼的博客
11-09 796
第三章：HTML5新增页面元素 一.预习笔记 二.课堂笔记 三.课后回顾 –仰望星空,脚踏实地;以梦为马,不负韶华
VUE项目后台管理系统（七）弹框形式新增用户信息，关闭添加用户对话框，重置表单。表单的验证规则
一天不写代码难受的博客
04-04 1851
目录弹框关闭添加用户对话框，重置表单表单的验证规则添加的方法 弹框 页面有一个按钮，一点击，弹出框，并且在这个里面添加数据 以上的代码就是官网 的弹框 有一个属性 默认弹框是false <!-- 添加用户dialog对话框 --> <el-dialog align="left" title="添加用户" :visible.sync="addUserVisible" width="50%" @close="closeAdduserDialog" > <!--
【vue】组件通过ref传值，一个组件实现新增/编辑弹窗的动态切换
weixin_41747256的博客
02-28 355
组件通过ref传值，一个组件实现新增/编辑弹窗的动态切换
Vue弹窗的使用与传值
qq_45525848的博客
01-13 1236
vue弹窗使用与传值
前端Vue Element UI 编辑表格选中行的值 #default=“scope” 传值
Tqlsecret的博客
07-09 1559
实现功能：点击表格中的编辑按钮，弹出弹框修改该行数据信息，效果图如下： 前端： 后端：
WordPress中构建Vue.js单页面应用实践
"本文将指导你如何在WordPress中利用Vue.js构建单页面应用（SPA），主要涉及WordPress REST API和Vue.js的关键技术，包括单文件组件、事件处理、计算属性和生命周期等。此外，还会介绍如何与Axios库配合，与...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值