vue封装组件以及调用「建议收藏」

export { default as addDialog } from './addDialog'
export { default as EditDialog } from './EditDialog'

<template>
<div><el-dialog
title="编辑"
:visible.sync="dialogVisible"
width="40%"
custom-class="custonStyle">
<el-row>
<el-col :span="24">
<el-form ref="addTagData" :model="tableData" :rules="rules" label-width="120px">
<el-form-item label="标题名称" prop="title">
<el-input v-model="tableData.title"></el-input>
</el-form-item>
<el-form-item label="标题类型" prop="titleType">
<el-radio-group v-model="tableData.titleType">
<el-radio label="0">企业</el-radio>
<el-radio label="1">个人</el-radio>
</el-radio-group>
</el-form-item>
<el-form-item label="元素类型" prop="eleType">
<el-radio-group v-model="tableData.eleType">
<el-radio label="0">复选</el-radio>
<el-radio label="1">单选</el-radio>
</el-radio-group>
</el-form-item>
<el-form-item label="必填" prop="unrequired">
<el-radio-group v-model="tableData.unrequired">
<el-radio label="0">是</el-radio>
<el-radio label="1">否</el-radio>
</el-radio-group>
</el-form-item>
<el-form-item>
<el-button type="primary" @click="submitForm('addTagData')">提交</el-button>
<el-button @click="resetForm('addTagData')">取消</el-button>
</el-form-item>
</el-form>
</el-col>
</el-row>
</el-dialog></div>
</template>
<script>
export default {
props: {
tableArray: {
type:Array,
default: ()=>[]
}
},
data(){
return {
dialogVisible:false,
tableData: { },
rules: {
title: [
{required: true,message: '标题名称不能空',trigger: 'blur'},
],
}
}
},
methods:{
//  弹出框编辑模型
relationFrom(row){
this.dialogVisible = !this.dialogVisible
this.reset()
this.tableData = Object.assign({},row)
console.log(this.tableData)
},
// todo 规则重置
// 表单重置
reset() {
if (this.$refs['addTagData']) {
this.$refs['addTagData'].resetFields();
}
},
//todo 提交
submitForm(formName) {
this.$refs[formName].validate((valid) => {
if (valid) {
console.log(this.tableData)
} else {
this.$message.warning("添加失败，必填未写")
return false;
}
});
},
resetForm(formName) {
this.dialogVisible =!this.dialogVisible
this.reset()
// this.$refs[formName].resetFields();
},
}
}
</script>
<style lang="scss" scoped>
/deep/ .custonStyle .el-dialog__body{border-top: 1px solid #ccc;}
</style>

<EditDialog ref="Edit"></EditDialog>

import {EditDialog} from './Popup/index'

components:{
EditDialog,
},

methods: {
//添加弹出框
editRow(row){
this.$refs.Edit.relationFrom(row)
},
},