vue+elementui通用弹窗的实现(新增+编辑)


Posted in Vue.js onJanuary 07, 2021

本文主要介绍了vue+elementui通用弹窗的实现(新增+编辑),分享给大家,具体如下:

vue+elementui通用弹窗的实现(新增+编辑)

组件模板

<el-dialog :title="title" :visible.sync="dialogShow" :close-on-click-modal="false">
  <div class="ym-common-dialog" :class="customClass">
    <div v-for="(col,index) in cols">
      <span><em v-if="!!col.isRequire">*</em>{{col.name}}</span>
      <template v-if="col.type === 'text'">
        <div>{{submitData[col.key]}}</div>
      </template>
      <template v-if="col.type === 'input'">
        <input type="text" v-model="submitData[col.key]" :placeholder="'请输入' + col.name">
      </template>
      <template v-if="col.type === 'radio'">
        <div class="flexX">
        <el-radio v-for="radio in col.data" v-model="submitData[col.key]" :label="radio.label">{{radio.name}}</el-radio>
        </div>
      </template>
      <template v-if="col.type === 'select'">
        <el-select v-model="submitData[col.key]" placeholder="请选择">
          <el-option
          v-for="option in col.data"
          :key="option.value"
          :label="option.label"
          :value="option.value">
          </el-option>
        </el-select>
      </template>
    </div>
  </div>
  <span slot="footer" class="dialog-footer">
    <el-button @click="dialogShow = false">取 消</el-button>
    <el-button type="primary" @click="confirm">确 定</el-button>
  </span>
</el-dialog>

弹窗的内容根据传入的数据去渲染,数据格式如下

cols: [{
  name: '输入框',
  key: 'ccc', // 提交时对应的字段
  type: 'input', // 类型 
  isRequire: true // 是否必填
}, {
  name: '单选框',
  key: 'aaa',
  type: 'radio',
  data: [{
    label: '1',
    name: '长城'
  }, {
    label: '2',
    name: '长安'
  }],
  isRequire: true
}, {
  name: '下拉框',
  key: 'bbb',
  type: 'select',
  data: [{
    value: '选项1',
    label: '黄金糕'
  }, {
    value: '选项2',
    label: '双皮奶'
  }],
  isRequire: true
}],

组件data和props

data() {
  return {
    submitData: {}, // 提交数据集合
    dialogShow: false
  }
},
props: {
  // 弹窗显示/隐藏
  dialogVisible: {
    type: Number,
    default: 0
  },
  // 弹窗Title
  title: String,
  // 自定义样式
  customClass: String,
  // 数据列
  cols: {
    type: Array,
    default: () => []
  },
  // 编辑时传入初始值
  data: {
    type: Object,
    default: () => {}
  }
},

组件数据的监听

watch: {
  dialogVisible(val) {
    if (val > 0) {
      this.dialogShow = true
    }
  },
  data: {
    handler(val) {
      this.submitData = val
    },
    immediate: true
  },
  submitData: {
    // 应对 切换单选框隐藏其他元素的问题
    // 父组件监听到单选框的值变化时,修改cols的值,即可实现元素的隐藏与显示
    handler() {
      this.$emit('change', this.submitData)
    },
    deep: true
  }
}

数据提交以及验证

confirm() {
  // 验证必填项
  let isMust = this.cols.filter(item => item.isRequire).map(item => item.key)
  Object.keys(this.submitData).forEach(key => {
    let index = isMust.indexOf(key)
    if ((index > -1) && this.submitData[key] !== '' && !!this.submitData[key]) {
      isMust.splice(index, 1)
    }
  })
  if (isMust.length > 0) {
    showDefaultTips('请注意必填项!', '', 3)
    return
  }
  this.$emit('complete', this.submitData)
  this.dialogShow = false
}

代码在此

到此这篇关于vue+elementui通用弹窗的实现(新增+编辑)的文章就介绍到这了,更多相关vue elementui 弹窗内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章希望大家以后多多支持三水点靠木!

Vue.js 相关文章推荐
在Vue中使用CSS3实现内容无缝滚动的示例代码
Nov 27 Vue.js
vue实现图片裁剪后上传
Dec 16 Vue.js
vue中实现点击空白区域关闭弹窗的两种方法
Dec 30 Vue.js
Vue中inheritAttrs的使用实例详解
Dec 31 Vue.js
vue form表单post请求结合Servlet实现文件上传功能
Jan 22 Vue.js
深入了解Vue动态组件和异步组件
Jan 26 Vue.js
Vue 数据响应式相关总结
Jan 28 Vue.js
vue登录页实现使用cookie记住7天密码功能的方法
Feb 18 Vue.js
vue实现倒计时功能
Mar 24 Vue.js
Vue提供的三种调试方式你知道吗
Jan 18 Vue.js
Axios代理配置及封装响应拦截处理方式
Apr 07 Vue.js
详解Vue2的diff算法
Jan 06 #Vue.js
vuex的使用步骤
Jan 06 #Vue.js
vue3.0中友好使用antdv示例详解
Jan 05 #Vue.js
基于Vue2实现移动端图片上传、压缩、拖拽排序、拖拽删除功能
Jan 05 #Vue.js
Vue+scss白天和夜间模式切换功能的实现方法
Jan 05 #Vue.js
jenkins自动构建发布vue项目的方法步骤
Jan 04 #Vue.js
vue3弹出层V3Popup实例详解
Jan 04 #Vue.js
You might like
ubuntu 编译安装php 5.3.3+memcache的方法
2010/08/05 PHP
第4章 数据处理-php字符串的处理-郑阿奇(续)
2011/07/04 PHP
需要注意的几个PHP漏洞小结
2012/02/05 PHP
php通过array_merge()函数合并关联和非关联数组的方法
2015/03/18 PHP
Gambit vs ForZe BO3 第三场 2.13
2021/03/10 DOTA
javascript编程起步(第五课)
2007/01/10 Javascript
tbody元素支持嵌套的注意方法
2007/03/24 Javascript
javascript for循环设法提高性能
2010/02/24 Javascript
ASP中Sub和Function的区别说明
2020/08/30 Javascript
JAVASCRIPT车架号识别/验证函数代码 汽车车架号验证程序
2012/01/08 Javascript
javascript中打印当前的时间实现思路及代码
2013/12/18 Javascript
Javascript模拟加速运动与减速运动代码分享
2014/12/11 Javascript
基于jQuery+JSON的省市二三级联动效果
2015/06/05 Javascript
jQuery基于ajax()使用serialize()提交form数据的方法
2015/12/08 Javascript
Javascript函数中的arguments.callee用法实例分析
2016/09/16 Javascript
JS之if语句对接事件动作逻辑(详解)
2017/06/28 Javascript
React路由鉴权的实现方法
2019/09/05 Javascript
vue cli3 调用百度翻译API翻译页面的实现示例
2019/09/13 Javascript
[16:14]教你分分钟做大人:米拉娜(HEROS)
2014/11/24 DOTA
Python实现的几个常用排序算法实例
2014/06/16 Python
Python正则表达式使用经典实例
2016/06/21 Python
简单了解什么是神经网络
2017/12/23 Python
python使用numpy读取、保存txt数据的实例
2018/10/14 Python
Python Numpy计算各类距离的方法
2019/07/05 Python
Python实现Singleton模式的方式详解
2019/08/08 Python
使用Python实现 学生学籍管理系统
2019/11/26 Python
使用pytorch搭建AlexNet操作(微调预训练模型及手动搭建)
2020/01/18 Python
马来西亚网上美容店:Hermo.my
2017/11/25 全球购物
Yahoo-PHP面试题3
2012/01/14 面试题
八年级历史教学反思
2014/01/10 职场文书
2014三八妇女节活动总结范文四篇
2014/03/09 职场文书
老干部工作先进集体事迹材料
2014/05/21 职场文书
2015年幼儿园教研活动总结
2015/03/25 职场文书
2015年大学宣传部工作总结
2015/05/26 职场文书
生日祝酒词大全
2015/08/10 职场文书
晶体管单管来复再生式收音机
2021/04/22 无线电