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查看html源文件
Nov 08 Javascript
Jquery Ajax的Get方式时需要注意URL地方
Apr 07 Javascript
img onload事件绑定各浏览器均可执行
Dec 19 Javascript
JavaScript中的Truthy和Falsy介绍
Jan 01 Javascript
jquery实现带缩略图的全屏图片画廊效果实例
Jun 25 Javascript
超实用的JavaScript表单代码段
Feb 26 Javascript
JS检测数组类型的方法小结
Mar 14 Javascript
深入理解vue.js中的v-if和v-show
Jun 22 Javascript
vue实现全选和反选功能
Aug 31 Javascript
vue实现a标签点击高亮方法
Mar 17 Javascript
TypeScript高级用法的知识点汇总
Dec 17 Javascript
Vue + Element-ui的下拉框el-select获取额外参数详解
Aug 14 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中截取字符串支持utf-8
2007/01/18 PHP
PHP教程 基本语法
2009/10/23 PHP
对PHP语言认识上需要避免的10大误区
2014/06/12 PHP
PHP在线打包下载功能示例
2016/10/15 PHP
JavaScript在IE和Firefox浏览器下的7个差异兼容写法小结
2010/06/18 Javascript
基于jQuery实现的当离开页面时出现提示的实现代码
2011/06/27 Javascript
Ext中下拉列表ComboBox组件store数据格式用法介绍
2013/07/15 Javascript
SyntaxHighlighter 3.0.83使用笔记
2015/01/26 Javascript
JS解析XML实例分析
2015/01/30 Javascript
js实现交换运动效果的方法
2015/04/10 Javascript
JS实现slide文字框缩放伸展效果代码
2015/11/05 Javascript
详解javascript实现自定义事件
2016/01/19 Javascript
微信小程序 swiper组件轮播图详解及实例
2016/11/16 Javascript
Vue动态组件实例解析
2017/08/20 Javascript
判断jQuery是否加载完成,没完成继续判断的解决方法
2017/12/06 jQuery
nodejs实现简单的gulp打包
2017/12/21 NodeJs
Vue-Router2.X多种路由实现方式总结
2018/02/09 Javascript
JavaScript字符串转数字的5种方法及遇到的坑
2018/07/16 Javascript
vue.js template模板的使用(仿饿了么布局)
2018/08/13 Javascript
JS常见构造模式实例对比分析
2018/08/27 Javascript
jquery选择器和属性对象的操作实例分析
2020/01/10 jQuery
jdk1.8+vue elementui实现多级菜单功能
2020/09/24 Javascript
Vue实现图书管理小案例
2020/12/03 Vue.js
使用js获取身份证年龄的示例代码
2020/12/11 Javascript
Python函数学习笔记
2008/10/07 Python
python爬取NUS-WIDE数据库图片
2016/10/05 Python
浅谈numpy中linspace的用法 (等差数列创建函数)
2017/06/07 Python
详解python 模拟豆瓣登录(豆瓣6.0)
2019/04/18 Python
python中设置超时跳过,超时退出的方式
2019/12/13 Python
Python开发之pip安装及使用方法详解
2020/02/21 Python
Charlotte Tilbury澳大利亚官网:英国美妆品牌
2018/10/05 全球购物
商铺租赁意向书
2014/04/01 职场文书
2015年求职自荐信范文
2015/03/04 职场文书
学校青年志愿者活动总结
2015/05/06 职场文书
2015年度对口支援工作总结
2015/07/22 职场文书
golang连接MySQl使用sqlx库
2022/04/14 Golang