使用可调整大小的包装器与 antd 表搞乱样式 - 如何解决？

问题描述

我实际上正在使用 react-resizable 以及也尝试了 re-resizable，它们似乎用 div 包裹了表格行，这实际上弄乱了 antd 表格的样式。

有没有办法，我可以解决这个问题，这样它就不会弄乱样式，或者做一些事情，这样它就可以在不将 div 包裹在行周围的情况下调整大小？？

这是代码

import React from 'react';
import { Table } from "antd";
import { Resizable } from "react-resizable";
import { Resizable as Resizer } from "re-resizable";

import ReactDragListView from "react-drag-listview";
import 'antd/dist/antd.css';
import './reactabulatorrStyles.css';

const ResizableTitle = (props) => {
  const { onResize,width,...restProps } = props;

  if (!width) {
    return <th {...restProps} />;
  }

  return (
    <Resizable
      width={width}
      height={0}
      handle={
        <span
          className="react-resizable-handle"
          onClick={(e) => {
            e.stopPropagation();
          }}
        />
      }
      onResize={onResize}
      draggableOpts={{ enableuserSelectHack: false }}
    >
      <th {...restProps} />
    </Resizable>
  );
};

const style = {
  display: "flex",alignItems: "center",justifyContent: "center",border: "solid 1px #ddd",background: "#f0f0f0"
};

const ResizableRow = (props) => {
  const { onResize,height,...restProps } = props;
  // if (!height) {
  //   return <tr {...restProps} />;
  // }

  return (
    <Resizer
    // style={style}
    defaultSize={{
      width: 90,height: 90
    }}
    
    >
      <td {...restProps} />
    </Resizer>
  );
}

class ReactTabulator extends React.Component {
  constructor(props) {
    super(props);

    this.state = {
      columns: [
        {
          title: <span className="dragHandler">Key</span>,dataIndex: "key",render: (text) => <span>{text}</span>,width: 50
        },{
          title: <span className="dragHandler">Name</span>,dataIndex: "name",width: 200
        },{
          title: <span className="dragHandler">Gender</span>,dataIndex: "gender",width: 100
        },{
          title: <span className="dragHandler">Age</span>,dataIndex: "age",{
          title: <span className="dragHandler">Address</span>,dataIndex: "address",width:200
        }
      ]
    };

    const that = this;
    this.dragProps = {
      onDragEnd(fromIndex,toIndex) {
        const columns = [...that.state.columns];
        const item = columns.splice(fromIndex,1)[0];
        columns.splice(toIndex,item);
        that.setState({
          columns
        });
      },nodeselector: "th",handleSelector: ".dragHandler",ignoreSelector: "react-resizable-handle"
    };

    this.dragRowProps = {
      onDragEnd(fromIndex,toIndex) {
        
      },nodeselector:"tr",handleSelector:".dragHandler",ignoreSelector: "react-resizable-handle"
    }
  }

 

  data = [
    {
      key: "1",name: "Boran",gender: "male",age: "12",address: "New York"
    },{
      key: "2",name: "JayChou",age: "38",address: "TaiWan"
    },{
      key: "3",name: "Lee",gender: "female",age: "22",address: "BeiJing"
    },{
      key: "4",name: "ChouTan",age: "31",address: "HangZhou"
    },{
      key: "5",name: "AiTing",address: "Xi’An"
    }
  ];

  components = {
    header: {
      cell: ResizableTitle
    },body: {
      cell: ResizableRow
    }
  };

  handleResize = (index) => (e,{ size }) => {
    this.setState(({ columns }) => {
      const nextColumns = [...columns];
      nextColumns[index] = {
        ...nextColumns[index],width: size.width
      };
      return { columns: nextColumns };
    });
  };

  render() {
    const columns = this.state.columns.map((col,index) => ({
      ...col,onHeaderCell: (column) => ({
        width: column.width,onResize: this.handleResize(index)
      })
    }));

    return (
      <ReactDragListView.DragColumn {...this.dragProps} {...this.dragRowProps}>
        <Table
          bordered          
          components={this.components}
          columns={columns}
          dataSource={this.data}
        />
      </ReactDragListView.DragColumn>
    );
  }
}

export default ReactTabulator;

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）