vue+element 模态框表格形式的可编辑表单实现


Posted in Javascript onJune 07, 2019

要实现的效果如下,初始化的时候,不可编辑,点击编辑按钮,编辑按钮隐藏,取消编辑按钮显示;部分input输入框变为可编辑

vue+element 模态框表格形式的可编辑表单实现

vue+element 模态框表格形式的可编辑表单实现

<el-dialog title="营销单详情" width="920px" @close="isEdit = false" class="dialog dialogAdd" custom-class="custom-dialog"
      :visible.sync="dialogEditVisible" :close-on-click-modal='false'>
    <el-form ref="editForm" style="margin-right: 20px;" :model="editForm" :inline="true" label-position="right" label-width="110px" size="mini">
      <el-form-item label="工单号" prop="no">
        <el-input v-model="editForm.no" disabled></el-input>
      </el-form-item>
      <el-form-item label="客户姓名" prop="khxm">
        <el-input v-model="editForm.khxm" :disabled="!isEdit || editForm.openId"></el-input>
      </el-form-item>
      <el-form-item label="联系电话" prop="khdh">
        <el-input v-model="editForm.khdh" :disabled="!isEdit || editForm.openId"></el-input>
      </el-form-item>
      <el-form-item label="客户地址">
        <el-input v-model="editForm.address" disabled></el-input>
      </el-form-item>
      <el-form-item label="营销人员-工号">
        <el-input v-model="editForm.yxry" disabled></el-input>
      </el-form-item>
      <el-form-item label="网格区域">
        <el-input v-model="editForm.qywg" disabled></el-input>
      </el-form-item>
      <el-form-item label="业务类型" prop="ywlx">
        <el-select v-model="editForm.ywlx" :disabled="!isEdit" placeholder="">
          <el-option v-for="item in ywlxList" :key="item" :label="item" :value="item"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="报装宽带兆数(M)" prop="kdzs" class="long-label">
        <el-select v-model="editForm.kdzs" :disabled="!isEdit" placeholder="">
          <el-option v-for="item in kdzsList" :key="item" :label="item" :value="item"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="手机基础套餐(最低消费)" class="long-label" prop="sjjctc" >
        <el-select v-model="editForm.sjjctc" :disabled="!isEdit" placeholder="">
          <el-option v-for="item in sjtcList" :key="item" :label="item" :value="item"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="业务受理单截屏">
        <p><a class="text-base" @click="show">查看图片</a></p>
      </el-form-item>
      <el-form-item label="下单时间" prop="createTime" >
        <el-input v-model="editForm.createTime" disabled></el-input>
      </el-form-item>
      <el-form-item label="备注" prop="remark">
        <el-input v-model="editForm.remark" :disabled="!isEdit"></el-input>
      </el-form-item>
    </el-form>

    <div slot="footer" class="dialog-footer" v-if="editForm.state != 3">
      <el-button v-if="!isEdit" @click="isEdit = true" size="mini">编 辑</el-button>
      <el-button v-else @click="cancelEdit" size="mini">取消编辑</el-button>
      <el-button type="primary" @click="saveEdit" size="mini">保 存</el-button>
    </div>
  </el-dialog>

data中的数据

editForm: {},        // 新增表单
 isEdit: false,   // 是否编辑
 dialogEditVisible: false,  // 新增模态框
 images: [], // 图片信息
 ywlxList: [],    // 业务类型列表
 kdzsList: ['50', '100', '200', '300'],    // 报装宽带兆数列表
 sjtcList: ['38', '58', '88', '98', '128', '138', '188'],    // 手机基础套餐列表
viewDetail(row){
    console.log(row)
    this.editForm = this.deepClone(row)
    this.dialogEditVisible = true
    this.$post("/anapi/YxdController/getById", {id: row.id}, (data) => {
      this.editForm = data.yxd
      this.editForm.qywg = row.name1 + row.name2 + row.name3 + row.gridName
      this.editForm.address = row.name1 + row.name2 + row.name3 + row.gridName + row.xxdz
      this.editForm.yxry = row.yxCname + '-' + row.yxId
      this.currentItem = this.deepClone(this.editForm)

      let imgs = data.yxd.imgs || []
      this.images = []
      imgs.map(item => {
        this.images.push(this.config.httpHeadUrl + item)
      })
    })
  },
  // 保存编辑
  saveEdit(){
    this.$refs.editForm.validate((valid) => {
      if (valid) {
        this.startLoading()
        this.$post("/api/YxdController/editYxd", this.editForm, (data) => {
          this.$message.success("修改成功!")
          this.dialogEditVisible = false
          this.getTableData(1)
        })
      }
    })
  },
  // 取消编辑
  cancelEdit(){
    this.isEdit = false
    this.editForm = this.deepClone(this.currentItem)
  },

  // 查看图片
  inited (viewer) {
    this.$viewer = viewer
  },
  show () {
    if(!this.images.length){
      this.$message.error("暂无图片")
      return
    }
    this.$viewer.show()
  },

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
屏蔽鼠标右键、Ctrl+n、shift+F10、F5刷新、退格键 的javascript代码
Apr 01 Javascript
range 标准化之获取
Aug 28 Javascript
同一页面多个商品倒计时JS 基于面向对象的javascript
Feb 16 Javascript
JQuery中使用Ajax赋值给全局变量失败异常的解决方法
Aug 18 Javascript
AngularJS实现textarea记录只能输入规定数量的字符并显示
Apr 26 Javascript
AngularJS 路由详解和简单实例
Jul 28 Javascript
jQuery中slidedown与slideup方法用法示例
Sep 16 Javascript
如何利用模板将HTML从JavaScript中抽离
Oct 08 Javascript
详解vue父子组件间传值(props)
Jun 29 Javascript
使用ngrok+express解决本地环境中微信接口调试问题
Feb 26 Javascript
Vue解析剪切板图片并实现发送功能
Feb 04 Javascript
JS替换字符串中指定位置的字符(多种方法)
May 28 Javascript
vue-cli3项目展示本地Markdown文件的方法
Jun 07 #Javascript
Element实现表格分页数据选择+全选所有完善批量操作
Jun 07 #Javascript
详解vue项目中实现图片裁剪功能
Jun 07 #Javascript
sortable+element 实现表格行拖拽的方法示例
Jun 07 #Javascript
利用Vue-draggable组件实现Vue项目中表格内容的拖拽排序
Jun 07 #Javascript
Vue中实现权限控制的方法示例
Jun 07 #Javascript
vue 父组件中调用子组件函数的方法
Jun 06 #Javascript
You might like
php模拟用户自动在qq空间发表文章的方法
2015/01/07 PHP
php中array_slice和array_splice函数解析
2016/10/18 PHP
用JQuery 判断某个属性是否存在hasAttr的解决方法
2013/04/26 Javascript
基于Jquery实现键盘按键监听
2014/05/11 Javascript
javascript使用正则获取url上的某个参数
2014/09/04 Javascript
javascript实现实时输出当前的时间
2015/04/27 Javascript
js验证真实姓名与身份证号,手机号的简单实例
2016/07/18 Javascript
浅谈NodeJs之数据库异常处理
2017/10/25 NodeJs
JavaScript实现计算多边形质心的方法示例
2018/01/31 Javascript
Cocos2d实现刮刮卡效果
2018/12/20 Javascript
我要点爆”微信小程序云开发之项目建立与我的页面功能实现
2019/05/26 Javascript
vue点击当前路由高亮小案例
2019/09/26 Javascript
JQuery 实现文件下载的常用方法分析
2019/10/29 jQuery
微信小程序后端实现授权登录
2020/02/24 Javascript
NestJs使用Mongoose对MongoDB操作的方法
2021/02/22 Javascript
Python中map和列表推导效率比较实例分析
2015/06/17 Python
一个基于flask的web应用诞生 bootstrap框架美化(3)
2017/04/11 Python
python跳过第一行快速读取文件内容的实例
2018/07/12 Python
python基于K-means聚类算法的图像分割
2019/10/30 Python
pytorch下使用LSTM神经网络写诗实例
2020/01/14 Python
Pyspark读取parquet数据过程解析
2020/03/27 Python
纯css3显示隐藏一个div特效的具体实现
2014/02/10 HTML / CSS
让IE9以下版本的浏览器兼容HTML5的方法
2014/03/12 HTML / CSS
HTML5 Canvas+JS控制电脑或手机上的摄像头实例
2014/05/03 HTML / CSS
英国在线珠宝店:The Jewel Hut
2017/03/20 全球购物
英国领先的在线药房:Pharmacy First
2017/09/10 全球购物
巴西体育用品商店:Lojão dos Esportes
2018/07/21 全球购物
物业门卫岗位职责
2013/12/28 职场文书
总会计师岗位职责
2014/02/19 职场文书
大学生就业策划书范文
2014/04/04 职场文书
本科毕业生自荐信
2014/06/02 职场文书
工商局局长个人对照检查材料思想汇报
2014/09/23 职场文书
旷课检讨书范文
2015/01/27 职场文书
民事代理词范文
2015/05/25 职场文书
2016年“抗战胜利纪念日”71周年校园广播稿
2015/12/18 职场文书
幼儿园教师辞职信
2019/06/21 职场文书