1、拖动时,其他行隐藏原因是Table中的rowKey属性与判断的属性的不一样
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 | <Table rowKey= "id" //不要用官网的index,用后台返的id名 components={{ body: { wrapper: DraggableContainer, row: DraggableBodyRow, }, }} pagination={ false } dataSource={dataSource} columns={columns} loading={loading} > </Table> |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 | //官网 DraggableBodyRow = ({ className, style, ...restProps }) => { const { dataSource } = this .state; // function findIndex base on Table rowKey props and should always be a right array index const index = dataSource.findIndex(x => x.index === restProps[ 'data-row-key' ]); //这里用的是index return <SortableItem index={index} {...restProps} />; }; //改动 const DraggableBodyRow = ({ className, style, ...restProps }) => { // const { dataSource } = this.state; // function findIndex base on Table rowKey props and should always be a right array index const index = dataSource.findIndex(x => x.id === restProps[ 'data-row-key' ]); //将index改为Table中设置的id名 return <SortableItem index={index} {...restProps} />; }; |
2、Table中有图片时,样式不居中
1 2 3 4 5 | .row-dragging td { padding: 16px; visibility: hidden; vertical-align: middle; //这个控制样式居中,加上就可以了 } |
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】博客园社区专享云产品让利特惠,阿里云新客6.5折上折
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步