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;   //这个控制样式居中,加上就可以了
    }
    

      

     

  • 相关阅读:
    lookup:ID列
    分享几篇文章
    怎样无限制使用smartgit ?
    C++ Win32控制台应用程序捕捉关闭事件
    mt4 在K线上 放文字
    变色指标
    用windows 打包 证书
    监管fca asic nfa 啥啥啥
    sublime 3 build 3126 code ,压缩包在我的360企业云盘里,搜sublime
    个人作业收官——软件工程实践总结
  • 原文地址:https://www.cnblogs.com/uimeigui/p/14273577.html
Copyright © 2011-2022 走看看