vue列表信息展示中新增数据，与编辑数据页面复用，降低重复代码

场景

点击编辑

点击添加员工

这俩其实是用的同一个组件，只不过要进行封装，我这里就基于el-dialog组件封装这种表单弹窗

需要解决的问题

1.动态标题问题

解决方案：通过自定义属性title(名字随便起)在组件挂载时给属性赋值，同时组件内部显示这个标题属性

const props = defineProps({
    staffId: {
        type: Number,
        default: () => null
    },
    title:{
        type:String,
        default: () => null
    }
})

showEdit：用来控制弹窗表单的显示

editStaffId:用来区分是编辑还是新增，编辑需要拿到ID调接口进行数据回显，新增不需要，可以根据需求自己定义标题动态赋值

 <div v-if="showEdit">
        <StaffDetails  :title="editStaffId?'编辑员工':'添加员工'" 
        :staff-id="editStaffId?editStaffId:null"
         @exit-edit-page=" showEdit=false"></StaffDetails>
      </div>

2.底层组件el-dialog自带关闭按钮默认关闭行为问题

(自定义了关闭按钮，并设置el-dialog的show-close属性值为false即不用el-dialog提供的关闭按钮的没有该问题)

因为底层是基于el-dialog组件封装的弹窗关闭按钮默认是显示的，关闭按钮默认点击事件就是关闭自身（把el-dialog的v-model的值修改为false）但是我们是希望这个el-dialog组件是一直显示的，因为我们是基于el-dialog封装的一个弹窗表单组件，我们是直接控制这个弹窗表单组件的显示的，

那我们既然想用这个el-dialog自带的关闭按钮，就要修改这个按钮的点击事件，让他去关闭弹窗表单组件（整个父组件）

解决方案：修改el-dialog的before-close属性（关闭前的回调）改成我们自己的阻止默认关闭行为

//关闭事件
const emit = defineEmits(["exitEditPage"]);
function goBack() {
    emit("exitEditPage");
}

触发这个自定义关闭事件：在回调函数里面设置控制弹窗表单显示的变量值为false，即关闭弹窗表单组件

3.是否数据回显问题

添加不需要回显，编辑需要

解决方案：自定义属性staffId(随便起，我这里的含义是员工id)，默认值为null,当这个属性的值不为null时说明需要数据回显，通过判断这个属性就可以处理是否回显的问题了

const props = defineProps({
    staffId: {
        type: Number,
        default: () => null
    },
    title:{
        type:String,
        default: () => null
    }
})

在钩子函数里面做判断

onMounted(()=>{
    if(props.staffId){
        //回显函数
        getEcho(props.staffId)
    }
})

4.动态提交函数问题

点击保存按钮在添加时调用提交添加的函数，编辑是调用提交编辑的函数

解决方案：根据标记是添加还是修改的属性值做判断，我这里的属性是staffId,这个的值存在就是编辑，为默认的null就是添加

<el-button type="primary" @click="props.staffId?submitFormEdit(ruleFormRef):submitFormAdd(ruleFormRef)">保存</el-button>