React Antd Table点击事件点击字典表内容生成字典列表内容

由于有两个表,字典表和字典项目列表,点击字典表里的内容能生成字典项目表里的内容,所以写一个点击事件,

先做声明:

const [key, setKey] = useState(-1);

const [record, setRecord] = useState<any>([]);

const [data, setData] = useState<any[]>([]);

代码如下:

rowClassName={getRowClassName}

onRow={(record: any, rowkey: any) => {

return {

onClick: (_event) => {

setKey(rowkey);

setRecord(record);

},

};

}}

根据数据库的uuid和父子级id的关联性关联字段内容

useEffect(() => {

getDictItemList({ dictId: record.uuid }).then((res) => {

if (record.length === 0 || record.parentId === null) {

setData([]);

} else {

setData(res.data);

}

});

});

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
React AntdTable列表组件中,可以使用日期选择器DatePicker或日期区间选择器RangePicker来实现对时间字段的排序。 首先,在Table的columns属性中,定义一个时间列,设置其排序函数为一个比较日期的函数,例如: ``` const columns = [ { title: '时间', dataIndex: 'time', sorter: (a, b) => new Date(a.time) - new Date(b.time), defaultSortOrder: 'ascend', }, // 其他列... ]; ``` 其中,sorter属性定义了排序的比较函数,该函数将格的两条记录a和b作为参数传入,然后比较它们的时间字段的大小,返回一个负数、零或正数,分别代a小于、等于或大于b。 defaultSortOrder属性用于设置默认的排序顺序,默认为升序('ascend'),您可以根据需要自行调整。 然后,在Table的sorter属性中设置排序函数,例如: ``` <Table dataSource={dataSource} columns={columns} onChange={handleChange} /> ``` 其中,dataSource是一个包含数据的数组,columns是Table的列定义,onChange是当排序发生变化时的回调函数。 通过以上设置,您可以在Table的时间列标题上看到一个排序的箭头,单击该列即可按照时间升序或降序排序。 需要注意的是,如果时间字段为字符串类型,可以使用new Date()将其转换为日期对象进行比较。另外,若时间字段在dataSource中更新时需要刷新排序结果,您可以在改变数据源后,调用Table组件的forceUpdate方法强制重新渲染。 希望以上回答能够帮到您,如有不清楚处请您详细描述。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值