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.js桌面端自定义滚动条组件之美化滚动条VScroll
Dec 01 Vue.js
vue绑定class的三种方法
Dec 24 Vue.js
浅析vue中的nextTick
Dec 28 Vue.js
Vue实现摇一摇功能(兼容ios13.3以上)
Jan 26 Vue.js
如何在 Vue 表单中处理图片
Jan 26 Vue.js
Vue项目打包部署到apache服务器的方法步骤
Feb 01 Vue.js
Vue如何实现变量表达式选择器
Feb 18 Vue.js
如何使用vue3打造一个物料库
May 08 Vue.js
vue+spring boot实现校验码功能
May 27 Vue.js
解决vue $http的get和post请求跨域问题
Jun 07 Vue.js
Vue提供的三种调试方式你知道吗
Jan 18 Vue.js
Vue router配置与使用分析讲解
Dec 24 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中通过ADO调用Access数据库的方法测试不通过
2006/12/31 PHP
php-perl哈希算法实现(times33哈希算法)
2013/12/30 PHP
php curl模拟post提交数据示例
2013/12/31 PHP
Linux下手动编译安装PHP扩展的例子分享
2014/07/15 PHP
PHP PDOStatement::bindParam讲解
2019/01/30 PHP
php面向对象程序设计中self与static的区别分析
2019/05/21 PHP
学习YUI.Ext 第二天
2007/03/10 Javascript
javascript入门·对象属性方法大总结
2007/10/01 Javascript
js日期对象兼容性的处理方法
2014/01/28 Javascript
Jquery api 速查表分享
2015/01/12 Javascript
每天一篇javascript学习小结(Boolean对象)
2015/11/12 Javascript
javascript 判断页面访问方式电脑或者移动端
2016/09/19 Javascript
BootStrapValidator初使用教程详解
2017/02/10 Javascript
详解使用angular的HttpClient搭配rxjs
2017/09/01 Javascript
浅谈angularJs函数的使用方法(大小写转换,拷贝,扩充对象)
2018/10/08 Javascript
jQuery实现模拟搜索引擎的智能提示功能简单示例
2019/01/27 jQuery
如何换个角度使用VUE过滤器详解
2019/09/11 Javascript
[58:42]DOTA2上海特级锦标赛C组败者赛 Newbee VS Archon第一局
2016/02/27 DOTA
使用Python中的cookielib模拟登录网站
2015/04/09 Python
python2.7的编码问题与解决方法
2016/10/04 Python
python实现批量解析邮件并下载附件
2018/06/19 Python
Python使用MyQR制作专属动态彩色二维码功能
2019/06/04 Python
PyTorch的自适应池化Adaptive Pooling实例
2020/01/03 Python
Idea安装python显示无SDK问题解决方案
2020/08/12 Python
CSS3弹性盒模型开发笔记(一)
2016/04/26 HTML / CSS
纯CSS实现的大小渐变、渐远效果
2014/04/15 HTML / CSS
Canvas绘制浮动球效果的示例
2017/12/29 HTML / CSS
美国电子产品折扣网站:Daily Steals
2017/05/20 全球购物
Petmate品牌官方网站:宠物用品
2018/11/25 全球购物
Static Nested Class 和 Inner Class的不同
2013/11/28 面试题
计算机毕业生自荐信范文
2014/03/23 职场文书
营销与策划专业求职信
2014/06/20 职场文书
机关党员进社区活动总结
2014/07/05 职场文书
党员查摆问题及整改措施
2014/10/10 职场文书
放牛班的春天观后感
2015/06/01 职场文书
MySQL查看表和清空表的常用命令总结
2021/05/26 MySQL