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 相关文章推荐
用JQuery 实现的自定义对话框
Mar 24 Javascript
js验证输入是否为手机号码或电话号码示例
Dec 30 Javascript
javascript的push使用指南
Dec 05 Javascript
JavaScript使用Math.Min返回两个数中较小数的方法
Apr 06 Javascript
AngularJS Module方法详解
Dec 08 Javascript
jQuery鼠标悬浮链接弹出跟随图片实例代码
Jan 08 Javascript
AngularJS 使用 UI Router 实现表单向导
Jan 29 Javascript
基于javascript制作经典传统的拼图游戏
Mar 22 Javascript
jquery ztree实现右键收藏功能
Nov 20 jQuery
详解处理Vue单页面应用SEO的另一种思路
Nov 09 Javascript
详解如何给React-Router添加路由页面切换时的过渡动画
Apr 25 Javascript
js实现数字从零慢慢增加到指定数字示例
Nov 07 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
用函数读出数据表内容放入二维数组
2006/10/09 PHP
Smarty安装配置方法
2008/04/10 PHP
php中的比较运算符详解
2013/10/28 PHP
CodeIgniter框架URL路由总结
2014/09/03 PHP
详解PHP使用日期时间处理器Carbon人性化显示时间
2017/08/10 PHP
javascript add event remove event
2008/04/07 Javascript
JSON.stringify 语法实例讲解
2012/03/14 Javascript
JQuery入门——用one()方法绑定事件处理函数(仅触发一次)
2013/02/05 Javascript
JS取文本框中最小值的简单实例
2013/11/29 Javascript
JavaScript中一个奇葩的IE浏览器判断方法
2014/04/16 Javascript
JQuery中DOM加载与事件执行实例分析
2015/06/13 Javascript
js简单工厂模式用法实例
2015/06/30 Javascript
javascript 中的console.log和弹出窗口alert
2016/08/30 Javascript
BootStrap与validator 使用笔记(JAVA SpringMVC实现)
2016/09/21 Javascript
Bootstrap表单制作代码
2017/03/17 Javascript
详解vue项目打包步骤
2019/03/29 Javascript
vue实现element表格里表头信息提示功能(推荐)
2019/11/20 Javascript
javascript Canvas动态粒子连线
2020/01/01 Javascript
微信小程序vant弹窗组件的实现方式
2020/02/21 Javascript
vue中实现拖动调整左右两侧div的宽度的示例代码
2020/07/22 Javascript
vue 实现锚点功能操作
2020/08/10 Javascript
js实现鼠标滑动到某个div禁止滚动
2020/09/17 Javascript
vue+canvas实现拼图小游戏
2020/09/18 Javascript
Python面向对象程序设计之私有属性及私有方法示例
2019/04/08 Python
python实现基于朴素贝叶斯的垃圾分类算法
2019/07/09 Python
python实现点击按钮修改数据的方法
2019/07/17 Python
详解Python文件修改的两种方式
2019/08/22 Python
python实现七段数码管和倒计时效果
2019/11/23 Python
沙龙级头发造型工具:FOXYBAE
2018/07/01 全球购物
美国牙科折扣计划:DentalPlans.com
2019/08/26 全球购物
亚洲最大的运动鞋寄售店:KicksCrew
2020/11/26 全球购物
班主任工作年限证明
2014/01/12 职场文书
一体化教学实施方案
2014/05/10 职场文书
运动会通讯稿200字
2015/07/20 职场文书
2016年小学六一儿童节活动总结
2016/04/06 职场文书
导游词之台湾安平古堡
2019/12/25 职场文书