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 相关文章推荐
JavaScript 在各个浏览器中执行的耐性
Apr 06 Javascript
一些javascript一些题目的解析
Dec 25 Javascript
php图像生成函数之间的区别分析
Dec 06 Javascript
jquery跨域请求示例分享(jquery发送ajax请求)
Mar 25 Javascript
用于deeplink的js方法(判断手机是否安装app)
Apr 02 Javascript
js实现的点击数量加一可操作数据库
May 09 Javascript
jquery ajax请求方式与提示用户正在处理请稍等
Sep 01 Javascript
DOM基础教程之使用DOM控制表单
Jan 20 Javascript
JavaScript中消除闭包的一般方法介绍
Mar 16 Javascript
Angular.JS中的this指向详解
May 17 Javascript
Javascript中的作用域及块级作用域
Dec 08 Javascript
如何手写简易的 Vue Router
Oct 10 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自动更新新闻DIY
2006/10/09 PHP
php htmlspecialchars()与shtmlspecialchars()函数的深入分析
2013/06/05 PHP
解析PHP函数array_flip()在重复数组元素删除中的作用
2013/06/27 PHP
如何利用PHP执行.SQL文件
2013/07/05 PHP
laravel学习教程之存取器
2016/07/30 PHP
js 判断 enter 事件
2009/02/12 Javascript
JQUERY操作JSON实例代码
2010/02/09 Javascript
js自动生成的元素与页面原有元素发生堆叠的解决方法
2013/10/24 Javascript
JS控制一个DIV层在指定时间内消失的方法
2014/02/17 Javascript
js实现背景图片感应鼠标变化的方法
2015/02/28 Javascript
jQuery解析XML与传统JavaScript方法的差别实例分析
2015/03/05 Javascript
谈谈jQuery Ajax用法详解
2015/11/27 Javascript
jQuery添加和删除指定标签的方法
2015/12/16 Javascript
Vuex简单入门
2017/04/19 Javascript
微信小程序 刷新上拉下拉不会断详细介绍
2017/05/11 Javascript
jquery.rotate.js实现可选抽奖次数和中奖内容的转盘抽奖代码
2017/08/23 jQuery
vue interceptor 使用教程实例详解
2018/09/13 Javascript
angular的输入和输出的使用方法
2018/09/22 Javascript
JS拖动选择table里的单元格完整实例【基于jQuery】
2019/05/28 jQuery
为什么JavaScript中0.1 + 0.2 != 0.3
2020/12/03 Javascript
python正则表达式中的括号匹配问题
2014/12/14 Python
django用户注册、登录、注销和用户扩展的示例
2018/03/19 Python
Python Pandas 获取列匹配特定值的行的索引问题
2019/07/01 Python
Pandas_cum累积计算和rolling滚动计算的用法详解
2019/07/04 Python
django有外键关系的两张表如何相互查找
2020/02/10 Python
jupyter notebook参数化运行python方式
2020/04/10 Python
PyCharm+Pipenv虚拟环境开发和依赖管理的教程详解
2020/04/16 Python
Python descriptor(描述符)的实现
2020/11/15 Python
教学大赛获奖感言
2014/01/15 职场文书
作弊检讨书1000字
2014/02/01 职场文书
《两个铁球同时着地》教学反思
2014/02/13 职场文书
我的中国梦主题教育活动总结
2015/05/07 职场文书
2016学习全国教书育人楷模先进事迹心得体会
2016/01/21 职场文书
JavaScript实现登录窗体
2021/06/22 Javascript
mysql脏页是什么
2021/07/26 MySQL
《王国之心》迎来了发售的20周年, 野村哲发布贺图
2022/04/11 其他游戏