Skip to content

列宽规则

KBTable 列宽规则:列宽由列的宽度值和列的宽度类型决定,宽度值可以是像素值或百分比,必须且只有一列不设置列宽时,可以自适应宽度。

图片列

每个图片必须设置宽高,如果没有路径或者资源缺少,就使用该路径'https://via.placeholder.com/90x60.png'

示例:

tsx
{
  title: tr('[intl]图片'),
  key: 'img',
  width: 100,
  render(record: ResourceEntity) {
    return (
      <KBImage
        width={90}
        height={60}
        src={record.images?.[0] || 'https://via.placeholder.com/90x60.png'}
      />
    )
  },
},

操作列

操作列宽度根据UI来 固定为60(一个按钮)或90(两个或以上按钮) 如果有超过两个按钮 使用 KBOperateColumn 组件 显示第一个按钮,后续按钮折叠

示例:

tsx
  <KBOperateColumn action={
     [
      {
        icon: 'eye',
        key: 'info',
        onClick() {
          console.log('click')
        },
      },
      {
        icon: 'square-pen',
        key: 'edit',
        text: '编辑',
        onClick() {
          console.log('click')
        },
      },
      {
        icon: 'trash-2',
        key: 'delete',
        text: '删除',
        disabled: true,
        onClick() {
          console.log('click')
        },
      },
    ],
  } />