新增和编辑共用弹窗模板

新增和编辑弹窗模板

<!-- 添加或编辑用例合集 -->
<template><el-dialog:title="`${type == 'add' ? '新建' : type == 'edit' ? '编辑' : ''}`":visible.sync="dialogVisible"width="560px":close-on-click-modal="false":before-close="handleClose"><el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="88px" class="demo-ruleForm"><el-form-item label="名称" prop="name"> <el-input v-model="ruleForm.name" placeholder="请输入" :maxlength="30"></el-input></el-form-item><el-form-item label="描述" prop="desc"><el-input type="textarea" placeholder="请输入" :rows="4" :maxlength="200" v-model="ruleForm.desc"></el-input></el-form-item></el-form><span slot="footer" class="dialog-footer"><el-button size="small" @click="handleClose">取 消</el-button><el-button size="small" type="primary" :loading="loading" @click="submitForm('ruleForm')">确 定</el-button></span></el-dialog>
</template><script>
export default {name: "AddOrEditDialog",props: {rowData: {type: Object},// 弹窗类型type: {type: String,}},data() {return {dialogVisible: true,ruleForm: {name: '',desc: '',},rules: {name: [{ required: true, message: '请输入合集名称', trigger: 'blur' },{ min: 1, max: 30, message: '长度在 1 到 30 个字符', trigger: 'blur' }],desc: [{ min: 1, max: 200, message: '长度在 1 到 200 个字符', trigger: 'blur' }],},}},computed: {},created() {if(this.type == 'edit') {this.initForm()}},methods: {// 提交表单submitForm(formName) {this.$refs[formName].validate((valid) => {if (valid) {} else {console.log('error submit!!');return false;}});},resetForm(formName) {this.$refs[formName].resetFields();},handleClose() {this.$emit('closeDialog', false)},handleUpdate() {this.$emit('update')},// 初始化表单initForm() {},}
}
</script><style lang="less" scoped></style>

在组件中使用

<AddOrEditDialog
:type="dialogType"
:rowData="rowData"
@closeDialog="handleClose"
@update="handleUpdate"
></AddOrEditDialog>