当前位置：首页 > React

react表格两排复选框如何设定

2026-01-26 09:42:59React

实现双排复选框的表格设计

在React中实现两排复选框的表格，可以通过以下方式完成。假设使用antd库的Table组件，结合自定义渲染实现双排布局。

核心代码示例：

import { Table, Checkbox } from 'antd';

const dataSource = [
  { key: '1', name: '选项组A' },
  { key: '2', name: '选项组B' }
];

const columns = [
  {
    title: '名称',
    dataIndex: 'name',
    key: 'name',
  },
  {
    title: '复选框组',
    dataIndex: 'checks',
    key: 'checks',
    render: () => (
      <div style={{ display: 'grid', gridTemplateColumns: 'repeat(2, 1fr)', gap: 8 }}>
        {[1, 2, 3, 4].map(item => (
          <Checkbox key={item}>选项{item}</Checkbox>
        ))}
      </div>
    )
  }
];

function DoubleRowCheckboxTable() {
  return <Table dataSource={dataSource} columns={columns} />;
}

自定义样式布局方案

若需要更灵活的布局控制，可采用CSS Grid或Flexbox实现双排列：

const checkboxStyle = {
  display: 'grid',
  gridTemplateColumns: 'repeat(2, 150px)',
  gridAutoRows: '30px',
  alignItems: 'center'
};

const renderChecks = () => (
  <div style={checkboxStyle}>
    {['周一', '周二', '周三', '周四', '周五', '周六', '周日'].map(day => (
      <Checkbox key={day}>{day}</Checkbox>
    ))}
  </div>
);

状态管理方案

需要管理复选框状态时，建议使用React的useState配合行数据唯一标识：

const [checkedState, setCheckedState] = useState({});

const handleCheck = (rowKey, checkKey) => {
  setCheckedState(prev => ({
    ...prev,
    [`${rowKey}-${checkKey}`]: !prev[`${rowKey}-${checkKey}`]
  }));
};

// 在render函数中：
<Checkbox 
  checked={checkedState[`${record.key}-${item}`]} 
  onChange={() => handleCheck(record.key, item)}
/>

响应式布局处理

针对移动端适配，可通过媒体查询调整列数：

.checkbox-container {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
}

@media (max-width: 768px) {
  .checkbox-container {
    grid-template-columns: 1fr;
  }
}

以上方案可根据实际需求组合使用，关键点在于：