1、父页面 index.vue 里调用子页面 approvalRecords.vue
在 html 中编写代码
<a-tab-pane key="ab" tab="资产处置记录">
<approvalRecords :assetId="assetId"/>
</a-tab-pane>
这里的assid就是要传给子页面的参数
在页面 js 中编写,引入该组件页面
import approvalRecords from '/@/views/asset/components/approvalRecords.vue';
2、子组件接收
页面 approvalRecords.vue中编写
const props = defineProps({
assetId:{
type:Number,
default:null
}
});
3、子页面中调用接口请求数据
先引入调用接口编写的js
import {assetApproveLogApi} from '/@/api/asset-management/assetApproveLog-api'
// 日志列表
async function approveLogList() {
try {
console.log('调用日志列表');
tableLoading.value = true;
queryForm.assetId = props.assetId;
let res = await assetApproveLogApi.queryAssetApproveLog(queryForm);
console.log('日志列表');
console.log(res);
tableData.value = res.data.list;
total.value = res.data.total;
} catch (e) {
smartSentry.captureError(e);
} finally {
tableLoading.value = false;
}
}
4、编写请求接口代码 assetApproveLog-api.js 文件中编写
import {postRequest, getRequest} from '/@/lib/axios';
export const assetApproveLogApi = {
// ---------------- 审批日志管理 -----------------------
//审批日志-审批日志列表
queryAssetApproveLog(param) {
return postRequest('/zichan/queryAssetApproveLog', param);
},
};