表格

基础使用

<CTable
  columns={[
    { title: '名称', field: 'name' },
    { title: '性别', field: 'gender' },
  ]}
  data={[
    { name: 'Jason', gender: 'male' },
    { name: 'Lorry', gender: 'female' },
  ]}
  rowKey="name"
/>

自定义表头

function Demo() {
  const columns = [
    {
      title: '姓名',
      field: 'name',
      customHeader: ({ title }) => (
        <span style={{ color: 'purple', fontSize: '48px' }}>{title}</span>
      ),
    },
    {
      title: '性别',
      field: 'gender',
      customHeader: ({ title }) => (
        <span style={{ color: 'cyan', fontSize: '48px' }}>{title}</span>
      ),
    },
  ]

  const data = [
    { name: 'Jason', gender: 'male' },
    { name: 'Lorry', gender: 'female' },
  ]

  return <CTable columns={columns} data={data} rowKey="name" />
}

自定义单元格

function Demo() {
  const columns = [
    {
      title: '姓名',
      field: 'name',
    },
    {
      title: '性别',
      field: 'gender',
    },
    {
      title: '操作',
      customRender: ({ row }) => (
        <>
          <CButton label="编辑" size="sm" />
          <CButton label="删除" theme="negative" size="sm" />
        </>
      ),
    },
  ]

  const data = [
    { name: 'Jason', gender: 'male' },
    { name: 'Lorry', gender: 'female' },
  ]

  return <CTable columns={columns} data={data} rowKey="name" />
}

Props

名称 (*代表必须)	描述	类型	默认值

No Data

基础使用​

自定义表头​

自定义单元格​

Props​

基础使用

自定义表头

自定义单元格

Props