个人中心
gpt4 book ai didi

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

转载 作者：qq735679552 更新时间：2022-09-27 22:32:09 33 4
gpt4 key购买 nike

CFSDN坚持开源创造价值，我们致力于搭建一个资源共享平台，让每一个IT人在这里找到属于你的精彩世界.

这篇CFSDN的博客文章vue+elementui通用弹窗的实现(新增+编辑)由作者收集整理，如果你对这篇文章有兴趣，记得点赞哟.

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

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

组件模板 。

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
<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>

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

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
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 。

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
data() {
   return {
     submitData: {}, // 提交数据集合
     dialogShow: false
   }
},
props: {
   // 弹窗显示/隐藏
   dialogVisible: {
     type: Number,
     default : 0
   },
   // 弹窗Title
   title: String,
   // 自定义样式
   customClass: String,
   // 数据列
   cols: {
     type: Array,
     default : () => []
   },
   // 编辑时传入初始值
   data: {
     type: Object,
     default : () => {}
   }
},

组件数据的监听 。

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
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
   }
}

数据提交以及验证 。

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
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 弹窗内容请搜索我以前的文章或继续浏览下面的相关文章希望大家以后多多支持我！ 。

原文链接：https://segmentfault.com/a/1190000038853581 。

最后此篇关于vue+elementui通用弹窗的实现(新增+编辑)的文章就讲到这里了,如果你想了解更多关于vue+elementui通用弹窗的实现(新增+编辑)的内容请搜索CFSDN的文章或继续浏览相关文章，希望大家以后支持我的博客！ 。

33 4 0
文章推荐： 迎风飘扬五星红旗高清大图 愿以吾辈之青春守卫这盛世之中华
文章推荐： CentOS 配置防火墙详解及实例
文章推荐： 背景图片带字霸气女生伤感黑白 散场总是难免你又何必诚惶诚恐
文章推荐： 微信小程序onShareTimeline()实现分享朋友圈
qq735679552
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com