zoukankan      html  css  js  c++  java
  • ant design拖拽手柄列拖动时样式错乱的解决方案

    1、拖动时,其他行隐藏原因是Table中的rowKey属性与判断的属性的不一样

     <Table
              rowKey="id"   //不要用官网的index,用后台返的id名
              components={{
                body: {
                  wrapper: DraggableContainer,
                  row: DraggableBodyRow,
                },
              }}
              pagination={false}
              dataSource={dataSource}
              columns={columns}
              loading={loading}
            >
    
     </Table>
    
    //官网
      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中有图片时,样式不居中

    .row-dragging td {
      padding: 16px;
      visibility: hidden;
      vertical-align: middle;   //这个控制样式居中,加上就可以了
    }
    

      

     

  • 相关阅读:
    三种数据解析方式
    requests模块相关用法
    urllib模块基本用法
    django复习题
    scrapy框架编写向redis数据库中存储数据的相关代码时报错解决办法
    并发编程练习题
    网络编程 socket 开发练习题
    面向对象编程设计练习题(2)
    pytest-fixtured
    Python 删除某一目录下的所有文件或文件夹
  • 原文地址:https://www.cnblogs.com/uimeigui/p/14273577.html
Copyright © 2011-2022 走看看