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

简介: 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>


目录
相关文章
|
1天前
|
JavaScript
|
3天前
|
JavaScript 前端开发
【vue】 el-table解决分页不能筛选全部数据的问题
【vue】 el-table解决分页不能筛选全部数据的问题
12 4
|
5天前
|
JavaScript Java 测试技术
基于springboot+vue.js+uniapp的新能源汽车信息咨询服务附带文章源码部署视频讲解等
基于springboot+vue.js+uniapp的新能源汽车信息咨询服务附带文章源码部署视频讲解等
10 1
|
6天前
|
JavaScript Java 测试技术
基于springboot+vue.js+uniapp的高校毕业生就业信息系统小程序附带文章源码部署视频讲解等
基于springboot+vue.js+uniapp的高校毕业生就业信息系统小程序附带文章源码部署视频讲解等
11 2
|
6天前
|
JavaScript Java 测试技术
基于springboot+vue.js+uniapp的电影信息推荐APP附带文章源码部署视频讲解等
基于springboot+vue.js+uniapp的电影信息推荐APP附带文章源码部署视频讲解等
15 1
|
3天前
|
编解码 前端开发
【Vue3】解决电脑分辨率125%、150%及缩放导致页面变形的问题
【Vue3】解决电脑分辨率125%、150%及缩放导致页面变形的问题
6 0
|
3天前
|
JavaScript 前端开发
【vue】 Tinymce 数据 回显问题 | 第一次正常回显后面,显示空白bug不能编辑
【vue】 Tinymce 数据 回显问题 | 第一次正常回显后面,显示空白bug不能编辑
8 0
|
3天前
|
JavaScript
【vue】 vue如何根据不同路由地址更改页面的标题
【vue】 vue如何根据不同路由地址更改页面的标题
5 0
|
6天前
|
JavaScript Java 测试技术
基于springboot+vue.js+uniapp的分类信息服务平台附带文章源码部署视频讲解等
基于springboot+vue.js+uniapp的分类信息服务平台附带文章源码部署视频讲解等
8 0
|
6天前
|
JavaScript Java 测试技术
基于springboot+vue.js+uniapp的农业信息智能化种植系统附带文章源码部署视频讲解等
基于springboot+vue.js+uniapp的农业信息智能化种植系统附带文章源码部署视频讲解等
8 0