Appearance
列宽规则
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')
},
},
],
} />