React 组件实现表格一行显示6个选项的专项测试选择

import React, { ForwardedRef, forwardRef, useImperativeHandle, useRef, useState } from 'react'; import ContentCard from '@/components/ContentCard'; import './index.less'; import FixedWidthProForm from '@/components/FixedWidthProForm'; import { ProFormInstance } from '@ant-design/pro-form'; import { Checkbox } from 'antd'; import type { CheckboxValueType } from 'antd/es/checkbox/Group';

export type ApplicationFormRef = { getApplicationFormValue?: () => any; validateApplicationForm: () => Promise | undefined; }; interface Props { ref?: ForwardedRef; }

const sepcialData = [ { label: '讯飞语音测试', value: '1', }, { label: '安全专项测试', value: '2', }, { label: '蓝牙功能测试', value: '3', }, { label: 'WIFI功能测试', value: '4', }, { label: '性能测试', value: '5', }, { label: 'HDMI兼容性测试', value: '6', }, { label: 'Google ART测试', value: '7', }, { label: 'GDPR专项测试', value: '8', }, { label: '蓝牙性能测试', value: '9', }, { label: 'WIFI性能测试', value: '10', }, { label: '流畅度测试', value: '11', }, { label: 'USB兼容性测试', value: '12', }, { label: 'Amazon ART测试', value: '13', }, { label: 'CAPP专项测试', value: '14', }, { label: '蓝牙兼容性测试', value: '15', }, { label: 'WIFI兼容性测试', value: '16', }, ];

const SpecialTest: React.FC = forwardRef((props, ref) => { const formRef = useRef(null); const [checkValue, setCheckValue] = useState([]); useImperativeHandle(ref, () => ({ validateApplicationForm: () => formRef.current?.validateFieldsReturnFormatValue?.(), }));

const onChange = (checkedValues: CheckboxValueType[]) => { console.log(checkedValues, 92); setCheckValue(checkedValues); };

return (

<Checkbox.Group value={checkValue} onChange={onChange}> {sepcialData.map((item, index) => (

{item.label}

))} </Checkbox.Group>

); });

export default SpecialTest; .table-container { display: flex; flex-wrap: wrap; width: 100%; .table-cell { flex-basis: calc(16.66% - 20px); padding: 10px; box-sizing: border-box; border: none; box-shadow: 0 0 0 0.5px #ddd; }

}

要实现表格一行显示6个选项，可以通过调整样式和布局来实现。可以将每个选项的容器设置为等宽，并且设置flex-wrap: wrap使其换行。然后根据需要调整每个选项容器的宽度，使得每行显示6个选项。

下面是相应的代码示例：

.table-container {
  display: flex;
  flex-wrap: wrap;
  width: 100%;
}

.table-cell {
  flex-basis: calc(16.66% - 20px); /* 调整宽度，使每行显示6个选项 */
  padding: 10px;
  box-sizing: border-box;
  border: none;
  box-shadow: 0 0 0 0.5px #ddd;
}

将上述样式添加到你的代码中，即可实现表格一行显示6个选项的效果。记得将样式代码放在.less文件中，并在组件中引入。