vue+element 模态框是表格形式的可编辑表单

nifhlheimr 发布于2019-08-23 17:59 / 2799人阅读

摘要：要实现的效果如下初始化的时候不可编辑点击编辑按钮编辑按钮隐藏取消编辑按钮显示部分输入框变为可编辑营销单详情工单号客户姓名联系电话客户地址营销人员工号

要实现的效果如下,初始化的时候,不可编辑,点击编辑按钮,编辑按钮隐藏,取消编辑按钮显示;部分input输入框变为可编辑

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()
    },

GPU云服务器云服务器 html表格的可编辑 html表单形式 html 按表格形式输出数据库 vue表单控件

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/104477.html

vue的生命周期解析并通过表单理解MVVM（不仅理论，图文并茂）

摘要：在前端页面中，把用纯对象表示，负责显示，两者做到了最大限度的分离。的显示与否和的布尔值有关，还是只关注数据的变化。两个组件的布尔值通过两个临近的按钮控制，初始值和的结果都是。组件的声明在组件上，则完全没有进入生命周期。开始前说一说吐槽首先，文章有谬误的地方，请评论，我会进行验证修改。谢谢。 vue真是个好东西，但vue的中文文档还有很大的改进空间，有点大杂烩的意思，对于怎么...

silvertheo 2019-08-22 14:56 评论0 收藏0
移动弹窗基础知识浅析——IOS弹窗体系

摘要：尤其是遇到二次确认等场景因此，打算从头整理移动弹窗的基础知识，以弹窗体系为切入点，从定义出发，对移动弹窗进行分类，然后分别分析每一类弹窗的应用场景，以及在使用过程中需要注意的点。摘要：最为常见的【弹窗】反而是最捉摸不定的东西。各种类型的弹窗傻傻分不清楚，不知道在什么场景下应该用哪种弹窗。尤其是遇到二次确认等场景…… 因此，打算从头整理移动弹窗的基础知识，以iOS弹窗体系为切入点，从...

jas0n 2019-06-28 10:58 评论0 收藏0
vue+element表格中模态框的使用(解构赋值)

摘要：中定义方法解构赋值使用方法在函数中传入两个数组第一个数组中的每一项一一对应等于第二个数组的每一项例如张三得到张三表格中的内容操作催办中的数据当前操作行模态框控制显示隐藏点击催办按钮调用函数传入两个数组得到让模态框显示并把当前 main.js中定义方法 /**解构赋值 * @param {*} arr1 key * @param {*} arr2 value*/ Vue.pro...

phoenixsky 2019-08-23 18:19 评论0 收藏0
javascript功能插件大集合前端常用插件 js常用插件

摘要：转载来源包管理器管理着库，并提供读取和打包它们的工具。能构建更好应用的客户端包管理器。一个整合和的最佳思想，使开发者能快速方便地组织和编写前端代码的下一代包管理器。很棒的组件集合。隐秘地使用和用户数据。转载来源：https://github.com/jobbole/aw... 包管理器管理着 javascript 库，并提供读取和打包它们的工具。•npm – npm 是 javasc...

netmou 2019-08-23 12:28 评论0 收藏0