【无标题】

使用jeecg，点击详情，弹出分页表格

首先，我是一名java后端程序员，最近公司给我分配了一点前端任务，需求如下（完成之后的效果）：

1. 遇到的问题：表格数据总是没有。

2. 排查问题：

这是在弹出框中注册表格组件的代码：

//注册table数据
const {tableContext} = useListPage({
  tableProps: {
    title: '缴费详情',
    api: list,
    //请求参数
    // searchInfo: {diagnosticId: '1608016691268190210'},
    columns,
    canResize: false,
    // 是否使用搜索表单
    useSearchForm: false,
    // 是否显示“操作”列
    showActionColumn: false,
    /*clickToRowSelect: false,*/
    showIndexColumn: false,
  },
});

const [registerTable] = tableContext;

这是子组件接收父组件参数的代码：

const [register] = useModalInner((data) => {
  data && onDataReceive(data);
});

function onDataReceive(data) {
  console.log('Data Received', data);
}

父组件中是这样传值的：

/**
 * 编辑事件
 */
function handleEdit(record: Recordable) {
  openModal(true, {
    record,
    isUpdate: true,
    showFooter: true,
  });
}

主要问题在于，子组件在接受到父组件传的参数后，无法将数据设置到上方 “注册table数据” 的 searchInfo 中。因为表格组件先加载，然后子组件接收到父组件的参数，在设值（个人推测）。

我就想，能不能在子组件接收到父组件的参数后，将这个参数中的某些值再设置给表格。

然后我去仔细阅读了jeecg 的官方文档，还真有！！！

3. 解决方案：

我在上方子组件接收参数的代码中加上这样一句：

const [register] = useModalInner((data) => {
  data && onDataReceive(data);
});


function onDataReceive(data) {
  console.log('Data Received', data.record.id);
    //设置表格属性。
  setProps({searchInfo: {diagnosticId: data.record.id}})
}

对了，记得在上方接收 setProps 这个方法，不然使用不了。

const [registerTable, {setProps}] = tableContext;

这样，每次请求，都能携带父组件传过来的参数了。解决问题！！！