React 列宽拖拽调整功能

新接了个需求,要求可以拖拽表格的borer进行列宽调整。看到这个需求,感觉so easy, 印象中所有的UI组件库都支持这个功能,然后去看antd文档,懵逼了。。。。 4.0版本找不到这种功能支持,然后面向百度了一波,发现这种功能在antd 3.x版本里面,直接上链接。大家不要看到链接直接点走了哈,不行就先滑倒最下面,把注意事项看一下,然后再去看链接

antd 文档传送门 表格 Table - Ant Design

东西大差不差,4.x版本的antd也支持。个人实现代码如下,为了方便,TS方面避免了严格校验,由于用的地方较多,直接做了一个封装,封装如下

首先要下载依赖  npm install react-resizable --save ,然后重启项目。

import React, { PureComponent } from 'react';
import { Table } from 'antd';
import { Resizable } from 'react-resizable';


const ResizeableTitle = (props: { [x: string]: any; onResize: any; width: any; }) => {
  const { onResize, width, ...restProps } = props;
  if (!width) {
    return <th {...restProps} />
  }
  return (
    <Resizable width={width} height={0} onResize={onResize} draggableOpts={{ enableUserSelectHack: false }}>
      <th {...restProps} />
    </ Resizable >
  )
}

class TableResize extends PureComponent<any, any> {
  constructor(props: any) {
    super(props);
  }
  state = {
    columns: this.props.columns
  };

  components = {
    header: {
      cell: ResizeableTitle,
    },
  };

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

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

    return <Table
      components={this.components}
      columns={columns}
      rowKey="id"
      border                                  // 不要这个属性也有拖拽表示
      pagination={false}
      rowSelection={this.props.rowSelection}  // 选中行的事件,不需要可删除
      dataSource={this.props.dataSource}      
      onChange={(pagination: any, filters: any) => this.props.handleTableChange(pagination, filters)} /> //表格筛选功能触发的事件,不需要可删除
  }
}

export default TableResize

使用地方如下

首先引入组件

import TableReszie from '@components/TableResize'

        <TableReszie
          dataSource={dataSource}
          columns={columns}
          loading={loading}
          handleTableChange={handleTableChange}
        />

注意点:1.传入的columns一定要每列都要设置列宽,设置列宽属性 width:number,不然对应列的后面不会出现拖拽标识,或者出现了,但是不可拖拽

              2. 封装的组件内部的Table组件一定要传 rowKey="id",不然报错。pagination={false} 禁止自带分页器。

             3.一定要把文档的css粘贴到全局样式里,样式文档内有,代码如下。

            4.一定要针对表头文字进行禁止用户选择,不然用户按住鼠标左键从文字滑动的时候,选中了文字,然后再去拖拽,会发现松了鼠标后,依然可以进行拖拽,所以禁止用户选中表头文字很重

CSS 全局样式如下

// 表格拖拽样式
.react-resizable {
	position: relative;
	background-clip: padding-box;
}

.react-resizable-handle {
	position: absolute;
	width: 10px;
	height: 100%;
	bottom: 0;
	right: -5px;
	cursor: col-resize;
	z-index: 1;
}
//  禁止用户选中表头文字。
tr {
	th {
		user-select: none; /* Chrome and Opera */
		-webkit-user-select: none; /* Safari */
		-khtml-user-select: none; /* Konqueror HTML */
		-moz-user-select: none; /* Firefox */
		-ms-user-select: none; /* Internet Explorer/Edge */
	}
}

吐槽点:如果colums 内传的render jsx太复杂了话,稍微有点卡顿。所以渲染数据不要有太过复杂的处理哦

  • 6
    点赞
  • 15
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 5
    评论
如果您想使用jQuery Resizable或React-Resizable库来实现调整功能,可以按照以下步骤进行设置。 使用jQuery Resizable: 1. 引入jQuery库和jQuery Resizable插件的相关文件。 2. 在表格的表头单元格中添加一个可调整的元素,例如一个`<div>`。 3. 使用jQuery Resizable插件对该元素进行初始化,并设置适当的选项,如`handles`、`minWidth`、`maxWidth`等。 4. 在调整时,更新相应度。 示例代码: ```html <!DOCTYPE html> <html> <head> <title>调整</title> <link rel="stylesheet" href="jquery-ui.css"> <script src="jquery.js"></script> <script src="jquery-ui.js"></script> <style> table { width: 100%; table-layout: fixed; } th, td { padding: 5px; } .resize-handle { width: 5px; background-color: #ccc; cursor: col-resize; } </style> <script> $(function() { $('.resize-handle').resizable({ handles: 'e', // 只允许水平调整 minWidth: 50, maxWidth: 200 }).on('resize', function() { var columnWidth = $(this).width(); var columnIndex = $(this).parent().index(); $('table tr').each(function() { $(this).find('th, td').eq(columnIndex).width(columnWidth); }); }); }); </script> </head> <body> <table> <thead> <tr> <th><div class="resize-handle"></div>1</th> <th><div class="resize-handle"></div>2</th> <th><div class="resize-handle"></div>3</th> </tr> </thead> <tbody> <tr> <td>内容1</td> <td>内容2</td> <td>内容3</td> </tr> </tbody> </table> </body> </html> ``` 使用React-Resizable: 1. 安装React-Resizable库并导入所需的组件。 2. 在表格的表头单元格中包裹一个可调整的组件,例如`<Resizable>`。 3. 设置`<Resizable>`组件的属性,如`axis`、`minWidth`、`maxWidth`等。 4. 在调整时,更新相应度。 示例代码: ```jsx import React from 'react'; import { Resizable } from 'react-resizable'; const Table = () => { const handleResize = (index, width) => { // 更新相应度 // ... }; return ( <table> <thead> <tr> <th> <Resizable axis="x" width={100} height={0} minConstraints={[50, 0]} maxConstraints={[200, 0]} onResize={(e, { size }) => handleResize(0, size.width)} > 1 </Resizable> </th> <th> <Resizable axis="x" width={100} height={0} minConstraints={[50, 0]} maxConstraints={[200, 0]} onResize={(e, { size }) => handleResize(1, size.width)} > 2 </Resizable> </th> <th> <Resizable axis="x" width={100} height={0} minConstraints={[50, 0]} maxConstraints={[200, 0]} onResize={(e, { size }) => handleResize(2, size.width)} > 3 </Resizable> </th> </tr> </thead> <tbody> <tr> <td>内容1</td> <td>内容2</td> <td>内容3</td> </tr> </tbody> </table> ); }; export default Table; ``` 这是一个基本的示例,您可以根据具体需求进行进一步自定义和调整。请确保已正确引入相关的库文件,并按照库的文档说明进行设置。

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

前端 - wei

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值