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下的keyCode键码值表
Apr 10 Javascript
jquery select动态加载选择(兼容各种浏览器)
Feb 01 Javascript
使用微信内置浏览器点击下拉框出现页面乱跳转现象(iphone),该怎么办
Jan 04 Javascript
Bootstrap多级导航栏(级联导航)的实现代码
Mar 08 Javascript
深入浅析Bootstrap列表组组件
May 03 Javascript
彻底理解js面向对象之继承
Feb 04 Javascript
vue-star评星组件开发实例
Mar 01 Javascript
JavaScript代码实现txt文件的上传预览功能
Mar 27 Javascript
JavaScript动态创建二维数组的方法示例
Feb 01 Javascript
JS使用栈判断给定字符串是否是回文算法示例
Mar 04 Javascript
javascript sort()对数组中的元素进行排序详解
Oct 13 Javascript
vue-cli4.5.x快速搭建项目
May 30 Vue.js
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中输出转义JavaScript代码的实现代码
2011/04/22 PHP
PHP实现变色验证码实例
2014/01/06 PHP
PHP实现防盗链的方法分析
2017/07/25 PHP
Microsoft Ajax Minifier 压缩javascript的方法
2010/03/05 Javascript
基于jquery+thickbox仿校内登录注册框
2010/06/07 Javascript
JS随即打乱数组实现代码
2012/12/03 Javascript
JQuery中如何传递参数如click(),change()等具体实现
2013/04/28 Javascript
js实现收缩菜单效果实例代码
2013/10/30 Javascript
深入理解JavaScript系列(17):面向对象编程之概论详细介绍
2015/03/04 Javascript
Angularjs整合微信UI(weui)
2016/03/15 Javascript
浅析$.getJSON异步请求和同步请求
2016/06/06 Javascript
js轮播图的插件化封装详解
2017/07/17 Javascript
Bootstrap 模态框多次显示后台提交多次BUG的解决方法
2017/12/26 Javascript
webpack里使用jquery.mCustomScrollbar插件的方法
2018/05/30 jQuery
vue动态绑定class的几种常用方式小结
2019/05/21 Javascript
element-ui点击查看大图的方法示例
2020/12/14 Javascript
[01:04:08]完美世界DOTA2联赛PWL S3 INK ICE vs GXR 第一场 12.16
2020/12/18 DOTA
简单的抓取淘宝图片的Python爬虫
2014/12/25 Python
Python实现二叉搜索树
2016/02/03 Python
Python实现矩阵加法和乘法的方法分析
2017/12/19 Python
python中将zip压缩包转为gz.tar的方法
2018/10/18 Python
对Pyhon实现静态变量全局变量的方法详解
2019/01/11 Python
Python3.5基础之变量、数据结构、条件和循环语句、break与continue语句实例详解
2019/04/26 Python
python爬虫 模拟登录人人网过程解析
2019/07/31 Python
python求加权平均值的实例(附纯python写法)
2019/08/22 Python
世界上最全面的草药补充剂和顶级品牌维生素网站:HerbsPro
2019/01/20 全球购物
PHP面试题集
2016/12/18 面试题
一套PHP的笔试题
2013/05/31 面试题
好邻里事迹材料
2014/01/16 职场文书
珍惜时间演讲稿
2014/05/14 职场文书
幼儿园优秀班主任事迹材料
2014/05/14 职场文书
城管执法人员纪律作风整顿思想汇报
2014/09/13 职场文书
亚布力滑雪场导游词
2015/02/09 职场文书
档案管理员岗位职责
2015/02/12 职场文书
2015年个人招商工作总结
2015/04/25 职场文书
帮你提高开发效率的JavaScript20个技巧
2021/06/18 Javascript