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 相关文章推荐
Vue3配置axios跨域实现过程解析
Nov 25 Vue.js
vue祖孙组件之间的数据传递案例
Dec 07 Vue.js
Vue如何跨组件传递Slot的实现
Dec 14 Vue.js
vue从后台渲染文章列表以及根据id跳转文章详情详解
Dec 14 Vue.js
vue 导航守卫和axios拦截器有哪些区别
Dec 19 Vue.js
为什么推荐使用JSX开发Vue3
Dec 28 Vue.js
vue实现轮播图帧率播放
Jan 26 Vue.js
如何在vue中使用video.js播放m3u8格式的视频
Feb 01 Vue.js
vue2实现provide inject传递响应式
May 21 Vue.js
vue3使用vue-router的完整步骤记录
Jun 20 Vue.js
详解gantt甘特图可拖拽、编辑(vue、react都可用 highcharts)
Nov 27 Vue.js
一篇文章告诉你如何实现Vue前端分页和后端分页
Feb 18 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 日志缩略名的创建函数代码
2010/05/26 PHP
PHP可逆加密/解密函数分享
2012/09/25 PHP
解析php中的fopen()函数用打开文件模式说明
2013/06/20 PHP
浅析php fwrite写入txt文件的时候用 \r\n不能换行的问题
2013/08/06 PHP
详解php中serialize()和unserialize()函数
2017/07/08 PHP
php微信公众号开发之校园图书馆
2018/10/20 PHP
JavaScript delete操作符应用实例
2009/01/13 Javascript
元素的内联事件处理函数的特殊作用域在各浏览器中存在差异
2011/01/12 Javascript
学习使用bootstrap基本控件(table、form、button)
2016/04/12 Javascript
浅谈JavaScript 数据属性和访问器属性
2016/09/01 Javascript
AngularJS学习第一篇 AngularJS基础知识
2017/02/13 Javascript
javascript 中iframe高度自适应(同域)实例详解
2017/05/16 Javascript
NodeJS 实现手机短信验证模块阿里大于功能
2017/06/19 NodeJs
vue动态绑定组件子父组件多表单验证功能的实现代码
2018/05/14 Javascript
详解JavaScript对数组操作(添加/删除/截取/排序/倒序)
2019/04/28 Javascript
通过实例了解JS执行上下文运行原理
2020/06/17 Javascript
pycharm 使用心得(二)设置字体大小
2014/06/05 Python
使用 Python 获取 Linux 系统信息的代码
2014/07/13 Python
一个计算身份证号码校验位的Python小程序
2014/08/15 Python
python查询mysql中文乱码问题
2014/11/09 Python
基于Python的接口测试框架实例
2016/11/04 Python
TensorFlow损失函数专题详解
2018/04/26 Python
Python 列表去重去除空字符的例子
2019/07/20 Python
Python在cmd上打印彩色文字实现过程详解
2019/08/07 Python
Python关于反射的实例代码分享
2020/02/20 Python
OpenCV+python实现膨胀和腐蚀的示例
2020/12/21 Python
python绘图模块之利用turtle画图
2021/02/12 Python
美国香薰蜡烛品牌:PADDYWAX
2018/10/06 全球购物
Goodee官方商店:迷你投影仪
2021/03/15 全球购物
物理教师自荐信范文
2013/12/28 职场文书
医院领导班子整改方案
2014/10/01 职场文书
中班下学期个人总结
2015/02/12 职场文书
教师节主题班会教案
2015/08/17 职场文书
2016高校自主招生自荐信范文
2016/01/28 职场文书
MySQL的join buffer原理
2021/04/29 MySQL
搞笑Gif:这么白这么长的腿像极了一楼的女朋友
2022/03/21 杂记