问题修正：上一次封装了组件，刚开始想的是接口请求完成后，返回了数据在把组件显示出来，但是如果接口请求错误，或者某些原因导致了接口无法正常返回数据，就会导致页面报错白屏。所以今天就修改一下问题 上一篇：跳转

修改后:

<template><div class="box"><div class="topbus"></div><FromData :fromlist="fromlist" @UserSearch="Receive_Data" style="margin-top: 8px;" /><div class="Table_Top_button"><div class="Table_Top_button_Left"><Button  :type="'primary'"  :loading="ButIsLoading"  :icon="'plus'" :title="'添加'" :pattern="'centre'"  /><Button  :type="'primary'"  plain :loading="ButIsLoading"  :title="'权限配置'" :pattern="'centre'"  /><Button  :type="'primary'"  plain :loading="ButIsLoading"  :title="'自定义配置'" :pattern="'centre'"  /> <Button  :type="'dropdown'"    :title="'更多操作'"  /> </div> <div class="Table_Top_button_Rigth"><Button  plain  :title="'导出'" :pattern="'centre'" :icon="'download'"/><Button  plain  :title="'导入'" :pattern="'centre'" :icon="'upload'"/></div></div><Table  :PropTableS="PropTableS"  ></Table><Paging :PageList="PageList" @UserPaging="UserPagingSearch"></Paging></div>
</template>
<script setup lang="ts">
import { ref, onMounted, defineExpose, watch } from "vue";
import { FromData ,Button ,Table,Paging} from "@/components";
import useCurrentInstance from "@/hooks/useCurrentInstance";
import axios from "@/axios/project_interface";import bus from "@/mitt";
import { Return } from "@icon-park/vue-next/es/map";
const { proxy } = useCurrentInstance();
const form = ref({name: "",region: "",date1: "",date2: "",delivery: false,type: [],resource: "",desc: "",
});let ShowTable = ref(false)const fromlist = ref({formInline:true,isInput:true,listData:{"order_sn":{ title:'退货通知单',type:'input',clearable:true,icon:'',},"e3_order_sn_false":{ title:'销货单号',type:'input',clearable:true,icon:'',},"order_status":{title:'状态',type:'select',multiple:true,clearable:true,children:[{label:"已完成",value:1},{label:"已关闭",value:2},{label:"已终止",value:3},{label:'待业务确认',value:0},{label:'待财务确认',value:4}]},"push_e3":{title:'已推送E3',type:'select',clearable:true,children:[{label:"是",value:1},{label:'否',value:0}]},'has_back_order':{title:'已生成退单',type:'select',clearable:true,children:[{label:"已生成",value:1},{label:'未生成',value:0}]},'channel':{title:'渠道',type:'select',clearable:true,filterable:true,multiple:true,children:[],//请求后端接口的数据},'nc_code':{title:'NC代码',type:'select',clearable:true,filterable:true,multiple:true,children:[]},"customer_abbreviate":{ title:'客户简称',type:'input',clearable:true,},'warehouse_code':{title:'仓库',clearable:true,type:'select',children:[{label:"是",value:1},{label:'否',value:0}]},'business_type':{title:'业务类型',type:'select',clearable:true,filterable:true,multiple:true,children:[{label:"零售",value:1},{label:'批发',value:2}]},'user_id':{title:'业务员',type:'select',clearable:true,filterable:true,multiple:true,children:[]},'creator_id':{title:'制单人',type:'select',clearable:true,filterable:true,multiple:true,children:[]},'business_time':{title:'业务时间',type:'picker',},'logistics_number':{title:'退货物流单号',type:'input',},}
})let PageList = ref({layout:'total, sizes, prev, pager, next', //分页组件的排列顺序
})let ButIsLoading = ref(false)
let ShiwTable = ref(false)
let ShiwPaging = ref(false)let PropTableS = ref({tableStyle : {'width' : '99%','margin' : 'auto',},keyS:proxy.$PublicAPI.SetTableCotentWidth({selection:{type:'selection',width:50,},order_sn:{title:'退货通知单号',width:'200px',link:true},order_status_text:{title:'状态',},push_e3_text:{title:'已推送E3',},is_succeed_text:{title:'推送E3状态',},has_sale_order_text:{title:'已生成退单',},customer_abbreviate:{title:'客户简称',},nc_code:{title:'NC代码',},order_amount:{title:'金额',},sku_count:{title:'数量',},return_shipping_name:{title:'退货快递公司',},logistics_number:{title:'退货物流单号',},warehouse_name:{title:'仓库',},business_type_text:{title:'业务类型',},user_text:{title:'业务',},creator_text:{title:'制单人',},remarks:{title:'备注',},business_time:{title:'业务时间',width:'200px'},created_at:{title:'创建时间',width:'200px'},})
})let fromSearch = ref({})let PagingSearch = ref({page_size:20,page:1
})//定义表头的显示名称
let objeckeys = ref([])onMounted(()=>{getShopSelectList()
})bus.on("userressting", () => {getButton();
});//表单组件返回的查询数据
function Receive_Data(params:any,type:string) {fromSearch.value = paramslet list = {} if(type == 'resetting'){PagingSearch.value = {page_size:20,page:1}}//PagingSearch:分页的查询条件 , fromSearch：表单的查询条件list = Object.assign(PagingSearch.value, fromSearch.value)//调用表格列表的查询接口GetTabList(list).then(result =>{PropTableS.value.tables = result}).catch(error=>{})
}function GetTabList(params:boject) {  //测试数据return new Promise((resolve,reject)=>{axios.GetchargebacknoticeList(params).then(res=>{//PageList 这个是分页组件需要传递的数据PageList.value.total = Number(res.total) //总页数PageList.value.currentPage = Number(res.page)   //当前页PageList.value.pageSize = Number(res.page_size)   //每页数据多少条resolve(res.list); }).catch(error => {reject(error);});})
}//进入页面就调用了方法 list是查询条件，fromSearch 和 PagingSearch 定义的时候是有默认值的
let list = Object.assign(fromSearch.value,PagingSearch.value)//查询列表数据GetTabList(list).then(result =>{PropTableS.value.tables = result if(PropTableS.value){ShiwTable.value = true}})//店铺请求接口调用function getShopSelectList() {axios.GetShopSelectList().then(res=>{// fromlist.value.listData.store_id.children = res})}//接收分页传递过来的数据function UserPagingSearch(params:object) {PagingSearch.value = paramslet list = {}// Object.assign(值,值) 如果第一个参数值，和第二个参数值中有的键名一样，第二个参数值的内容会覆盖掉第一个参数值相同键的内容，如果第二个参数值的键，在第一参数值之中没有那就合并成新的对象就会添加进入如：fromSearch={a:1,b:2}  PagingSearch={a:3,b:3,c:4} ，合并后的list ={a:3,b:3,c:4}list = Object.assign(fromSearch.value, PagingSearch.value)GetTabList(list).then(result =>{PropTableS.value.tables = result})}</script>