时间戳

首页 > 解决方案 > 在 pxp-ui 中，如何在表格中显示描述字段而不是 Id

javascript - 在 pxp-ui 中，如何在表格中显示描述字段而不是 Id

问题描述

我在 pxp-ui 中有一个表并有此列：

subsystemId: {
                    type: 'AutoComplete',
                    isSearchable: true,
                    label: 'Subsystem Id',
                    variant: 'outlined',
                    grid: true,
                    form: true,
                    store: {
                        dataReader,
                        method: 'GET',
                        url: `pxp/Subsystem/list`,
                        idDD: 'subsystemId',
                        descDD: 'name',
                        parFilters: 'name',
                        params: {
                            sort: 'name',
                            start: '0',
                            limit: '50',
                            dir: 'DESC',
                            sort: 'subsystemId',
                          },
                        renderOption: (option) => (<span>
                            <b>{option.name}</b> <br />
                        </span>)                        
                    }
                    validate: {
                    shape: Yup.string().required(' es requerido'),
                    },

此时它只显示 id 而不是子系统的名称

在此处输入图像描述

如何显示名称而不是 id？

标签： javascriptreactjs

解决方案

您需要使用 renderColumn 来呈现要呈现的数据

renderColumn: (row) => {
          return (
            <div>
              <Typography variant="body2" color="inherit">
                <b>data1:</b>
                {row.someDataInRow1}
              </Typography>
              <Label color="success">
                <b>data2:</b>
                {row.someDataInRow2}
              </Label>
            </div>
          );
        },

你的例子就是这个

subsystemId: {
        type: 'AutoComplete',
        isSearchable: true,
        label: 'Subsystem Id',
        variant: 'outlined',
        grid: true,
        form: true,
        store: {
          dataReader,
          method: 'GET',
          url: `pxp/Subsystem/list`,
          idDD: 'subsystemId',
          descDD: 'name',
          parFilters: 'name',
          params: {
            start: '0',
            limit: '50',
            dir: 'DESC',
            sort: 'subsystemId', // only you need 1 sort,
          },
          renderOption: (option) => (
            <span>
              <b>{option.name}</b> <br />
            </span>
          ),
        },
        validate: {
          shape: Yup.string().required(' es requerido'),
        },
        renderColumn: (row) => {
          return (
            <div>
              <Typography variant="body2" color="inherit">
                <b>data1:</b>
                {row.someDataInRow1}
              </Typography>
              <Label color="success">
                <b>data2:</b>
                {row.someDataInRow2}
              </Label>
            </div>
          );
        },
      },

推荐阅读