vue+elementui通用弹窗的实现(新增+编辑)
作者:yingmhd 时间:2024-04-16 08:44:26
本文主要介绍了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
}
代码在此
来源:https://segmentfault.com/a/1190000038853581
标签:vue,elementui,弹窗
![](/images/zang.png)
![](/images/jiucuo.png)
猜你喜欢
python神经网络slim常用函数训练保存模型
2023-07-14 14:22:23
![](https://img.aspxhome.com/file/2023/6/120266_0s.png)
golang解析网页利器goquery的使用方法
2023-10-13 06:36:12
python使用opencv实现马赛克效果示例
2022-10-16 04:23:30
![](https://img.aspxhome.com/file/2023/8/67908_0s.jpg)
web标准页面知识必备 Ⅰ
2008-03-06 13:24:00
python设置检查点简单实现代码
2023-09-25 19:08:44
Python基于爬虫实现全网搜索并下载音乐
2023-12-26 16:36:40
![](https://img.aspxhome.com/file/2023/3/130763_0s.png)
vue开发中关于axios的封装过程
2024-04-30 10:40:24
Oracle删除死锁进程的方法
2024-01-20 13:30:33
PHP的mysqli_sqlstate()函数讲解
2023-06-08 14:30:30
![](https://img.aspxhome.com/file/2023/6/55456_0s.png)
Vue开发工具之vuejs-devtools安装教程及常见问题解决(最详细)
2024-05-10 14:09:33
![](https://img.aspxhome.com/file/2023/5/126575_0s.png)
Mysql InnoDB删除数据后释放磁盘空间的方法
2024-01-21 00:36:49
修改新云CMS底部版权信息字数限制
2008-07-31 18:00:00
![](https://img.aspxhome.com/file/UploadPic/20087/31/200873118219668s.gif)
关于Python-pip安装失败问题及解决
2021-03-13 05:07:41
![](https://img.aspxhome.com/file/2023/4/103514_0s.jpg)
还不知道Anaconda是什么?读这一篇文章就够了
2022-02-19 01:36:50
![](https://img.aspxhome.com/file/2023/9/114639_0s.png)
oracle chm帮助文件下载
2024-01-21 21:08:01
pytorch1.0中torch.nn.Conv2d用法详解
2023-07-17 10:53:48
对DJango视图(views)和模版(templates)的使用详解
2021-05-30 00:37:51
YOLOv5车牌识别实战教程(五)字符分割与识别
2022-04-07 07:38:25
![](https://img.aspxhome.com/file/2023/9/97189_0s.png)
Python3中exp()函数用法分析
2023-06-11 03:17:24
python语法学习print中f-string用法示例
2021-01-08 11:11:24