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 相关文章推荐
ESLint 是如何检查 .vue 文件的
Nov 30 Vue.js
vue实现两个区域滚动条同步滚动
Dec 13 Vue.js
基于vuex实现购物车功能
Jan 10 Vue.js
vue脚手架项目创建步骤详解
Mar 02 Vue.js
详解Vue.js 可拖放文本框组件的使用
Mar 03 Vue.js
vue-router中hash模式与history模式的区别
Jun 23 Vue.js
vue项目支付功能代码详解
Feb 18 Vue.js
vue 数字翻牌器动态加载数据
Apr 20 Vue.js
VUE解决跨域问题Access to XMLHttpRequest at
May 06 Vue.js
vue router 动态路由清除方式
May 25 Vue.js
Vue深入理解插槽slot的使用
Aug 05 Vue.js
vue本地构建热更新卡顿的问题“75 advanced module optimization”完美解决方案
Aug 05 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
PHP.MVC的模板标签系统(一)
2006/09/05 PHP
在JavaScript中调用php程序
2009/03/09 PHP
php 把数字转换成汉字的代码
2015/07/21 PHP
php自定义类fsocket模拟post或get请求的方法
2015/07/31 PHP
PHP模拟post提交数据方法汇总
2016/02/16 PHP
PHP中使用jQuery+Ajax实现分页查询多功能操作(示例讲解)
2017/09/17 PHP
ThinkPHP5 的简单搭建和使用详解
2018/11/15 PHP
IE8 引入跨站数据获取功能说明
2008/07/22 Javascript
两种简单实现菜单高亮显示的JS类代码
2010/06/27 Javascript
使表格的标题列可左右拉伸jquery插件封装
2014/11/24 Javascript
JavaScript实现鼠标滑过图片变换效果的方法
2015/04/16 Javascript
js实现使用鼠标拖拽切换图片的方法
2015/05/04 Javascript
javascript实现获取字符串hash值
2015/05/10 Javascript
JS基于clipBoard.js插件实现剪切、复制、粘贴
2016/05/03 Javascript
第九篇Bootstrap导航菜单创建步骤详解
2016/06/21 Javascript
js学习之----深入理解闭包
2016/11/21 Javascript
js 性能优化之算法和流程控制
2017/02/15 Javascript
canvas绘制一个常用的emoji表情
2017/03/30 Javascript
如何抽象一个Vue公共组件
2017/10/17 Javascript
vue router 用户登陆功能的实例代码
2019/04/24 Javascript
使用异步组件优化Vue应用程序的性能
2019/04/28 Javascript
javascrpt密码强度校验函数详解
2020/03/18 Javascript
从零学python系列之从文件读取和保存数据
2014/05/23 Python
python下调用pytesseract识别某网站验证码的实现方法
2016/06/06 Python
浅谈python之高阶函数和匿名函数
2019/03/21 Python
PYTHON绘制雷达图代码实例
2019/10/15 Python
如何完美的建立一个python项目
2020/10/09 Python
Contém1g官网:巴西彩妆品牌
2020/01/17 全球购物
师德模范事迹材料
2014/06/03 职场文书
欢迎领导标语
2014/06/27 职场文书
公务员培的训心得体会
2014/09/01 职场文书
戒毒悔改检讨书
2014/09/21 职场文书
入党自传范文2015
2015/06/26 职场文书
如何解决springcloud feign 首次调用100%失败的问题
2021/06/23 Java/Android
java多态注意项小结
2021/10/16 Java/Android
Python 全局空间和局部空间
2022/04/06 Python