1、TABLE表格嵌套radio单选框

1、使用场景:

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

    效果图:

表格嵌套radio

代码实现,采用的是函数式编写:

1、定义选中变量:

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

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

3、表格:

<Table

          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也不推荐,所以最后采用上边的方式。

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容