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 相关文章推荐
写了一个layout,拖动条连贯,内容区可为iframe
Aug 19 Javascript
JavaScript 布尔操作符解析  &amp;&amp; || !
Aug 10 Javascript
JS 实现点击a标签的时候让其背景更换
Oct 15 Javascript
解析Javascript中难以理解的11个问题
Dec 09 Javascript
javascript实现的HashMap类代码
Jun 27 Javascript
JS实现OCX控件的事件响应示例
Sep 17 Javascript
EasyUI中实现form表单提交的示例分享
Mar 01 Javascript
JS日期格式化之javascript Date format
Oct 01 Javascript
JQuery中attr属性和jQuery.data()学习笔记【必看】
May 18 Javascript
详解JavaScript的内存空间、赋值和深浅拷贝
Apr 17 Javascript
基于vue实现一个神奇的动态按钮效果
May 15 Javascript
js 计数排序的实现示例(升级版)
Jan 12 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中单引号与双引号的区别分析
2014/08/19 PHP
PHP获取毫秒级时间戳的方法
2015/04/15 PHP
PHP中的多种加密技术及代码示例解析
2016/10/20 PHP
PHP生成腾讯云COS接口需要的请求签名
2018/05/20 PHP
php实现根据身份证获取精准年龄
2020/02/26 PHP
js滚动条多种样式,推荐
2007/02/05 Javascript
Javascript 各浏览器的 Javascript 效率对比
2008/01/23 Javascript
jQuery动画效果-fadeIn fadeOut淡入浅出示例代码
2013/08/28 Javascript
jQuery中mouseover事件用法实例
2014/12/26 Javascript
JavaScript实现节点的删除与序号重建实例
2015/08/05 Javascript
JS简单实现tab切换效果的多窗口显示功能
2016/09/07 Javascript
原生js代码实现图片放大境效果
2016/10/30 Javascript
js 点击a标签 获取a的自定义属性方法
2016/11/21 Javascript
js中的数组对象排序分析
2018/12/11 Javascript
iview form清除校验状态的实现
2019/09/19 Javascript
js实现鼠标点击页面弹出自定义文字效果
2019/12/24 Javascript
vue+canvas实现拼图小游戏
2020/09/18 Javascript
python调用短信猫控件实现发短信功能实例
2014/07/04 Python
python检测某个变量是否有定义的方法
2015/05/20 Python
Python的Django框架中forms表单类的使用方法详解
2016/06/21 Python
python爬虫入门教程--正则表达式完全指南(五)
2017/05/25 Python
回调函数的意义以及python实现实例
2017/06/20 Python
基于Python对象引用、可变性和垃圾回收详解
2017/08/21 Python
解决Python图形界面中设置尺寸的问题
2020/03/05 Python
pycharm开发一个简单界面和通用mvc模板(操作方法图解)
2020/05/27 Python
Python定时任务框架APScheduler原理及常用代码
2020/10/05 Python
CSS3中媒体查询结合rem布局适配手机屏幕
2019/06/10 HTML / CSS
美国批发零售网站:GearXS
2016/07/26 全球购物
ALEX AND ANI:手镯,项链,耳环和更多
2017/04/20 全球购物
英国鹦鹉店:Parrot Essentials
2018/12/03 全球购物
仓库管理员岗位职责
2014/03/19 职场文书
领导班子群众路线与四风问题对照检查材料思想汇报
2014/10/11 职场文书
武夷山导游词
2015/02/03 职场文书
企业安全生产规章制度
2015/08/06 职场文书
数据库连接池
2021/04/06 MySQL