<template>
<div>
<el-dialog :title="dialogTitle" :visible.sync="dialogVisible" width="40%">
<el-form :model="form" :rules="rules" ref="ruleForm">
<el-form-item label="活动名称" :label-width="formLabelWidth">
<el-input v-model="form.name"></el-input>
</el-form-item>
<el-form-item label="活动区域" :label-width="formLabelWidth">
<el-select v-model="form.region" placeholder="请选择">
<el-option
:label="item.label"
:value="item.value"
v-for="(item, index) in optionsList"
:key="index"
></el-option>
</el-select>
</el-form-item>
</el-form>
<span slot="footer" class="dialog-footer">
<el-button @click="cancel">取 消</el-button>
<el-button type="primary" @click="submitForm">确 定</el-button>
</span>
</el-dialog>
</div>
</template>
<script>
import { deepClone } from '@/utils'
const defaultForm = { name: '', region: '' }
export default {
data() {
return {
// 弹窗
dialogTitle: '添加',
dialogVisible: false,
// 表单
form: {},
formLabelWidth: '100px',
rules: {
name: [
{ required: true, message: '请输入活动名称', trigger: 'blur' },
{ min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' }
],
region: [
{ required: true, message: '请选择活动区域', trigger: 'change' }
]
},
// 下拉列表
optionsList: [
{ label: '选项一', value: 0 },
{ label: '选项二', value: 1 }
]
}
},
mounted() {},
methods: {
// 打开弹窗
onShow(info) {
if (info) {
this.form = info
} else {
this.form = deepClone(defaultForm)
}
this.dialogVisible = true
this.$nextTick(() => {
this.$refs.ruleForm.clearValidate()
})
},
// 关闭弹窗
cancel() {
this.dialogVisible = false
},
// 表单确定事件
submitForm() {
this.$refs[ruleForm].validate(valid => {
if (valid) {
alert('submit!')
} else {
console.log('error submit!!')
return false
}
})
this.dialogVisible = false
}
}
}
</script>
<style lang="scss" scoped>
::v-deep .el-select {
width: 100%;
}
</style>
01-11
1091
![](https://csdnimg.cn/release/blogv2/dist/pc/img/readCountWhite.png)