Ant Design 框架table表中详情功能的实现

1、 页面传参

 {
      title: '操作',
      width: '40%',
      render: (text, record) => {
        const { getFieldDecorator } = this.props.form;

        //console.log('text, record', text, record);
        // console.log('record', record);
        return (
          <Fragment>
            <Button
              shape="round"
              style={{ marginRight: 8 }}
              onClick={() => {
                this.handleShowModal(record.id);
              }}
            >
              详情
            </Button>            
          </Fragment>
        );
      },
    },

2、 获取参数发请求

handleShowModal = query => {
    const { dispatch, list } = this.props;
  
    const id = query;
    dispatch({
      type: 'file/searchTableDetail',
      payload: id,
    });
    this.setState({
      visible: true,
    });
  };

3、model层

*searchTableDetail({ payload: query }, { call, put }) {
      const response = yield call(searchTableDetail, query);
      yield put({
        type: 'save',
        payload: { response, query },
      });
    },

4、service层

export async function searchTableDetail(params) {
  return request(`/server/api/mrp/queryFileDetail?id=${params}`);
}