html在表格中写单选框,1、TABLE表格嵌套radio单选框

1、使用场景：

使用react+ant框架组合：table表格中某一列为单选框，进入页面需要默认选中，并且可选：

效果图：

表格嵌套radio

代码实现，采用的是函数式编写：

1、定义选中变量：

const [RowKey, setRowKey] = useState('')

2、在useEffect()中对RowKey进行初始化，比如表格数据重新请求时，进行初始化。

3、表格：

rowKey='hashCode'

dataSource={dataSource}

columns={columns}

pagination={false}

loading={loading}

size="middle"

style={{ minHeight: 400 }}

rowSelection={rowSelection}

/>

注意：rowKey='hashCode' ，hashcode是数据中某一项，不编写会报错。rowSelection={rowSelection} 是主要配置，下边上rowSelection配置项

4、rowSelection配置项

const rowSelection = {

type: 'radio',//单选框类型

columnTitle: '默认意图',//列名

columnWidth: 150,//列宽

selectedRowKeys: RowKey,//默认选项

onChange: (selectedRowKeys, selectedRows) => onSelectChange(selectedRowKeys, selectedRows),//用户选择时触发回调

};

const onSelectChange = (selectedRowKeys, selectedRows) => {

setRowKey(selectedRowKeys[0])//将选择项赋值

}

在实现过程中，rowKey='hashCode'不设置的话，会报RowKey.indexof not a function的错误；

也尝试了

getCheckboxProps: record => ({

checked: record.is_default ? true : false,

}),

方式进行显示，但是控制台会有报错，react也不推荐，所以最后采用上边的方式。