BasicTable 的几个bug

[zuihou]

• 最新版2.3.0代码

问题1： BasicTable 列设置太多后，表格变形

• 代码：

const [registerTable, { reload, getSelectRowKeys, getForm }] = useTable({
        title: t('lamp.user.table.title'),
        api: page,
        columns,
        formConfig: {
          labelWidth: 120,
          schemas: searchFormSchema,
        },
        handleSearchInfoFn: handleSearchInfoByCreateTime,
        useSearchForm: true,
        showTableSetting: true,
        bordered: true,
        rowKey: 'id',
        rowSelection: {
          type: 'checkbox',
        },
        actionColumn: {
          width: 160,
          title: t('common.column.action'),
          dataIndex: 'action',
          slots: { customRender: 'action' },
        },
      });

export const columns: BasicColumn[] = [
  {
    title: t('lamp.user.account'),
    dataIndex: 'account',
    // width: 180,
  },
  {
    title: t('lamp.user.name'),
    dataIndex: 'name',
    // width: 180,
  },
  {
    title: t('lamp.user.orgId'),
    dataIndex: 'orgId',
    // width: 180,
  },
  {
    title: t('lamp.user.stationId'),
    dataIndex: 'stationId',
    // width: 180,
  },
  {
    title: t('lamp.user.readonly'),
    dataIndex: 'readonly',
    // width: 180,
  },
  {
    title: t('lamp.user.email'),
    dataIndex: 'email',
    // width: 180,
  },
  {
    title: t('lamp.user.mobile'),
    dataIndex: 'mobile',
    // width: 180,
  },
  {
    title: t('lamp.user.sex'),
    dataIndex: 'sex',
    // width: 180,
  },
  {
    title: t('lamp.user.state'),
    dataIndex: 'state',
    // width: 180,
  },
  {
    title: t('lamp.user.avatar'),
    dataIndex: 'avatar',
    // width: 180,
  },
  {
    title: t('lamp.user.nation'),
    dataIndex: 'nation',
    // width: 180,
  },
  {
    title: t('lamp.user.education'),
    dataIndex: 'education',
    // width: 180,
  },
  {
    title: t('lamp.user.positionStatus'),
    dataIndex: 'positionStatus',
    // width: 180,
  },
  {
    title: t('lamp.user.workDescribe'),
    dataIndex: 'workDescribe',
    // width: 180,
  },
  {
    title: t('lamp.user.passwordErrorLastTime'),
    dataIndex: 'passwordErrorLastTime',
    // width: 180,
  },
  {
    title: t('lamp.user.passwordErrorNum'),
    dataIndex: 'passwordErrorNum',
    // width: 180,
  },
  {
    title: t('lamp.user.passwordExpireTime'),
    dataIndex: 'passwordExpireTime',
    // width: 180,
  },
  {
    title: t('lamp.user.password'),
    dataIndex: 'password',
    // width: 180,
  },
  {
    title: t('lamp.user.salt'),
    dataIndex: 'salt',
    // width: 180,
  },
  {
    title: t('lamp.user.lastLoginTime'),
    dataIndex: 'lastLoginTime',
    // width: 180,
  },
  {
    title: t('lamp.common.createTime'),
    dataIndex: 'createTime',
    sorter: true,
// 只设置了一个宽度
    width: 180,
  },
];

正常情况：

异常情况：
点击行勾选时，表格宽度变宽

[zuihou]

问题2： 有了复选框或者单选框后， 点击最后一列操作列的 编辑 或者 删除按钮 也会触发选中行的事件。

场景： 本想我只想 点编辑， 却触发了选中当前行 和 编辑 事件！

[mynetfan]

问题2不是BUG，参考 #570

[zuihou]

问题2不是BUG，参考 #570

感谢回复，问题2 已解决。

[zuihou]

• 最新版2.3.0代码

问题1： BasicTable 列设置太多后，表格变形

• 代码：

const [registerTable, { reload, getSelectRowKeys, getForm }] = useTable({
        title: t('lamp.user.table.title'),
        api: page,
        columns,
        formConfig: {
          labelWidth: 120,
          schemas: searchFormSchema,
        },
        handleSearchInfoFn: handleSearchInfoByCreateTime,
        useSearchForm: true,
        showTableSetting: true,
        bordered: true,
        rowKey: 'id',
        rowSelection: {
          type: 'checkbox',
        },
        actionColumn: {
          width: 160,
          title: t('common.column.action'),
          dataIndex: 'action',
          slots: { customRender: 'action' },
        },
      });

export const columns: BasicColumn[] = [
  {
    title: t('lamp.user.account'),
    dataIndex: 'account',
    // width: 180,
  },
  {
    title: t('lamp.user.name'),
    dataIndex: 'name',
    // width: 180,
  },
  {
    title: t('lamp.user.orgId'),
    dataIndex: 'orgId',
    // width: 180,
  },
  {
    title: t('lamp.user.stationId'),
    dataIndex: 'stationId',
    // width: 180,
  },
  {
    title: t('lamp.user.readonly'),
    dataIndex: 'readonly',
    // width: 180,
  },
  {
    title: t('lamp.user.email'),
    dataIndex: 'email',
    // width: 180,
  },
  {
    title: t('lamp.user.mobile'),
    dataIndex: 'mobile',
    // width: 180,
  },
  {
    title: t('lamp.user.sex'),
    dataIndex: 'sex',
    // width: 180,
  },
  {
    title: t('lamp.user.state'),
    dataIndex: 'state',
    // width: 180,
  },
  {
    title: t('lamp.user.avatar'),
    dataIndex: 'avatar',
    // width: 180,
  },
  {
    title: t('lamp.user.nation'),
    dataIndex: 'nation',
    // width: 180,
  },
  {
    title: t('lamp.user.education'),
    dataIndex: 'education',
    // width: 180,
  },
  {
    title: t('lamp.user.positionStatus'),
    dataIndex: 'positionStatus',
    // width: 180,
  },
  {
    title: t('lamp.user.workDescribe'),
    dataIndex: 'workDescribe',
    // width: 180,
  },
  {
    title: t('lamp.user.passwordErrorLastTime'),
    dataIndex: 'passwordErrorLastTime',
    // width: 180,
  },
  {
    title: t('lamp.user.passwordErrorNum'),
    dataIndex: 'passwordErrorNum',
    // width: 180,
  },
  {
    title: t('lamp.user.passwordExpireTime'),
    dataIndex: 'passwordExpireTime',
    // width: 180,
  },
  {
    title: t('lamp.user.password'),
    dataIndex: 'password',
    // width: 180,
  },
  {
    title: t('lamp.user.salt'),
    dataIndex: 'salt',
    // width: 180,
  },
  {
    title: t('lamp.user.lastLoginTime'),
    dataIndex: 'lastLoginTime',
    // width: 180,
  },
  {
    title: t('lamp.common.createTime'),
    dataIndex: 'createTime',
    sorter: true,
// 只设置了一个宽度
    width: 180,
  },
];

正常情况：

异常情况：
点击行勾选时，表格宽度变宽

研究了半天，发现问题1是因为一个样式导致的：

<PageWrapper dense contentFullHeight fixedHeight contentClass="flex">
....
</PageWrapper>

加了 contentClass="flex" (代码是从src/views/demo/system/account/index.vue 复制的)就会导致选中行时变形， 请问这个contentClass="flex" 是什么意思？

[zuihou]

可以将 src/views/demo/system/account/index.vue 代码，按照上图调整后，可以复现问题1

[renjf1]

这个得看下antd