vue3封装表单组件（三）02封装el-dialog组件的传值-select选择框、input输入框之查询、重置的使用 & vue3中父子传值的使用步骤

vue3封装表单组件（三）02封装el-dialog组件的传值-select选择框、input输入框之查询、重置的使用 & vue3中父子传值的使用步骤

效果

1、弹框表格-初始页面

2、弹框表格-内容

3、弹框选中内容后，主页表格增加行数

代码

1、页面代码

index.vue

<template> <div> <h3>科研攻关团队信息</h3> <el-button type="primary" @click="examine()">添加科研攻关团队</el-button> <div style="margin: 20px;width: 80%;"> <el-table :data="tableData" stripe style="width: 100%"> <el-table-column label="序号" type="index" width="160"></el-table-column> <el-table-column prop="teamName" label="名称" width="180"> </el-table-column> <el-table-column prop="teamUnitName" label="所在单位" width="180"> </el-table-column> <el-table-column v-if="route.query.type ==='view'" label="操作" width="150"> <template #default="scope"> <el-button type="primary" size="default" @click="handleDelete(scope.$index,scope.row)">删除</el-button> </template> </el-table-column> </el-table> </div> <SelectLab :list="tableData" :show="showDialogLab" @emit-close="showDialogLab=false" @emit-select="selectLabOk"> </SelectLab> </div> </template> <script lang="ts" setup> import { ref ,reactive,computed} from 'vue' import SelectLab from '@/components/SelectLab' import { useRoute,useRouter } from 'vue-router' import { ElMessage, ElMessageBox, tagEmits } from 'element-plus' const route = useRoute() const router = useRouter() console.log(route.query.type); let tableData = ref([{ labId:11, teamName: '科技实验室', teamUnitName: '集团总部', }, { labId:12, teamName: '电力实验室', teamUnitName: '北京总部', }, { labId:13, teamName: '基建实验室', teamUnitName: '昌平分公司', }, { labId:14, teamName: '输电实验室', teamUnitName: '河北分公司', }]) const showDialogLab = ref(false) // view-详情页 'add'-新增页 'edit'-编辑页 const examine =()=>{ showDialogLab.value = true } const selectLabOk = (val:any) => { console.log(val); tableData.value = [...tableData.value,...val] } const handleDelete =(index:Number,row:any)=>{ tableData.value.splice(index,1) } const handleClose = (done: () => void) => { ElMessageBox.confirm('确定关闭当前对话框?') .then(() => { done() }) .catch(() => { // catch error }) } const examineEvent =(data:any) =>{ console.log('传回的组件数据',data); // const idList =ref([]) // selectTable.value.forEach((item)=>{ // idList.value.push(item.id) // }) // ids = idList.value data.ids = [1,2] // approval(data).then((res:any)=>{ // const {success} =res // if(success){ // onload() // 刷新表格 ElMessage.success('审核成功') dialogVisible.value = false // } // }) } </script> 

2、封装组件

src\components\SelectLab.vue

<template> <!-- title="选择科研攻关团队" --> <el-dialog v-model="showDia" :title="title" width="80%" @close="close()"> <div style="display:flex"> <div style="flex:9"> <el-form ref="formRef" :inline="true" :model="form"> <el-form-item label="名称：" prop="labName"> <el-input v-model="form.labName" placeholder="请输入"></el-input> </el-form-item> <el-form-item label="所在单位：" prop="labUnitName"> <el-input v-model="form.labUnitName" placeholder="请输入"></el-input> </el-form-item> </el-form> </div> <div style="flex:2"> <el-button type="primary" size="default" @click="query">查询</el-button> <el-button type="primary" size="default" @click="resetForm ()">重置</el-button> </div> </div> <div> <el-table ref="tableRef" :data="tableData" stripe style="width: 100%" @selection-change="selectChange"> <el-table-column type="selection" width="160"></el-table-column> <el-table-column label="序号" type="index" width="160"></el-table-column> <el-table-column prop="teamName" label="名称" width="180"> </el-table-column> <el-table-column prop="teamUnitName" label="所在单位" width="180"> </el-table-column> </el-table> </div> <div class="pagin-bottom"> <el-pagination :currentPage="form.pageNumber" layout="total, sizes, prev, pager, next, jumper" :page-sizes="[10, 20, 30, 40]" :total="total" @current-change="changePageNum" @size-change="changePageSize" /> </div> <template #footer> <span class="dialog-footer"> <el-button type="primary" @click="okSelect()"> 确定 </el-button> </span> </template> </el-dialog> </template> <script lang="ts" setup> / * 组件引用方式： * 1、导入组件： import SelectLab from '@/components/SelectLab' * 2、组件引用： <SelectLab :list="tableData" :show="showDialogLab" @emit-close="showDialogLab=false" @emit-select="selectLabOk"> * 3、参数说明： ① :selected 是传入数据 :select="[]" 已废弃 * ② :show 是控制组件显示关闭的变量 * ③ @emit-close 关闭弹框事件，即showDialogLab=false * ④ @emit-select 确定事件，接受传出的数据，接收一个参数 */ import { ref, reactive, computed, watch, unref } from 'vue' // import { getLabsV2 } from '@/api/couny' import { ElMessage } from 'element-plus' const formRef = ref(null) let tableRef = ref(null) const tableData = ref([{ labId: 1, teamName: '科技实验室', teamUnitName: '集团总部', }, { labId: 2, teamName: '电力实验室', teamUnitName: '北京总部', }, { labId: 3, teamName: '基建实验室', teamUnitName: '昌平分公司', }, { labId: 4, teamName: '输电实验室', teamUnitName: '河北分公司', }]) // 监听方法 const emits = defineEmits(['emit-select', 'emit-close', 'update:show']) // 传入参数，包含：已选的数据，显示属性 const props = defineProps({ // 外部带入的已选择的数据，用来回显打勾 todo 暂未处理该变量 show: { type: Boolean, default() { return false } }, list: { type: Array, default() { return [] } }, title:{ type:String, default(){ return '选择科研攻关团队' } } }) const thisSelected = ref([]) let showDia = computed({ get: () => props.show, set: (val: any) => emits('update:show', val) }) // 仅在显示时加载数据 watch(showDia, async () => { console.log('showDia',showDia); if (showDia.value) { thisSelected.value = [] query() } }) const form = reactive({ labName: '', labUnitName: '', pageSize: 10, pageNumber: 1, }) const total = ref(0) // 每页数量改变 const changePageSize = (val: any) => { form.pageSize = val query() } // 页码改变 const changePageNum = (val: any) => { form.pageNumber = val query() } // 选择数据 const selectChange = (val: any) => { console.log('选择数据', val); thisSelected.value = val } // 请求查询 const query = async () => { tableRef.value!.clearSelection() // await getLabsV2(form).then((res:any)=>{ // tableData.value = res.data.data // total.value = res.data.total // }) } // 重置 const resetForm = () =>{ const a = unref(formRef) a.resetFields() // console.log(formRef.value); // formRef.value.resetFields() } // 相同元素 const isSame = (arr1: any, arr2: any) => { return arr1.filter((item: any) => { return arr2.some((i: any) => item.labId == i.labId) }) } // 确定选择，传出数据，关闭事件 const okSelect = () => { if (isSame(props.list, thisSelected.value).length > 0) { ElMessage({ type: 'error', message: '存在同一实验室，请重新选择！', }) } else { emits('emit-select', thisSelected.value) console.log('biao', props.list) emits('emit-close', false) } } // 关闭事件 const close = () => { emits('emit-close', false) } </script> 

3、接口文件

src\api\couny.js

// import request from '@/utils/request' const url = '/thingsgrid-science' //枚举值查询--写法一 export const queryId = (id)=>{ 
    return request({ 
    url:`${ 
     url}/dict/queryDictById`, method:'post', data }) } // 获取表格数据 -- 写法二 export function getList(params){ 
    return request({ 
    url:'api/thingsgrid-system/dept/lazy-list', method:'get', params, }) } // 删除数据 -- 写法三 export function remove (params){ 
    return request({ 
    url:'api/thingsgrid-system/dept/remove', method:'post', params, }) } // 牵头单位组织树列表 export const getUnits = (data)=>{ 
    return request({ 
    url:`${ 
     url}/unit/getUnits`, method:'post', data }) } // 审核 export const approval =(data)=>{ 
    return request({ 
    url:`${ 
     url}/mediumExam/approval`, method:'post', data }) } // 立项管理-实验室/可研攻关团队 export const getLabsV2 =(data)=>{ 
    return request({ 
    url:`${ 
     url}/unit/getLabsV2`, method:'post', data }) } 

版权声明：

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如若内容造成侵权、违法违规、事实不符，请将相关资料发送至xkadmin@xkablog.com进行投诉反馈，一经查实，立即处理！

转载请注明出处，原文链接：https://www.xkablog.com/qdvuejs/10749.html