调用组件

<lookDialog v-if="showLookDialog" submit :arrayData="preinstallData" :rowData="innerFormData"
            title="查看详情" @close="showLookDialog = false" @submit="editDialogSaveClick" />

组件数据参考

arrayData: [
    { label: '上报单位', value: 'deptName' },
    { label: '采购信息', value: 'procurementCount' },
    { label: '合同基础信息', value: 'contractFoundationCount' },
]
rowData: {
    deptName: '部门名称',
    procurementCount: 15111113215,
    contractFoundationCount: '36611454',
}

组件代码

<template>
    <vxe-modal v-model="showLookDialog" :title="title" width="60%" @close="$emit('close')">
        <template #default>
            <el-form :disabled="!submit" :model="rowData2" label-width="220px" class="demo-ruleForm"
                style="display: flex;flex-wrap: wrap;">
                <el-form-item :label="item.label" prop="pass" style="width: 50%;" v-for="item in arrayData"
                    :key="item.name">
                    <el-input v-model="rowData2[item.value]" autocomplete="off" />
                </el-form-item>
            </el-form>
            <div class="flex flex-end" v-if="submit">
                <el-button type="primary" size="default" @click="saveClick">保存</el-button>
            </div>
        </template>
    </vxe-modal>
</template>

<script>
export default {
    name: '',
    data() {
        return {
            showLookDialog: true,
            rowData2: this.rowData

        }
    },
    props: {
        rowData: { //当前行的数据
            type: Object,
            default: () => {
                return {}
            }
        },
        arrayData: {  //需要传递的数据格式
            type: Array,
            default: () => {
                return []
            }
        },
        title: {  //标题
            type: String,
            default: ''
        },
        submit: {  //是否可以编辑并显示提交按钮
            type: Boolean,
            default: false
        }
    },
    methods: {
        saveClick() {
            this.$emit('submit', this.rowData2)
        }
    },
}
</script>