1.创建ResizeAbleTable文件夹
1.1 index.js
import {Table} from "antd4"
import React, {useEffect, useState} from "react"
import {Resizable} from "react-resizable"
import "./index.less"
/**
* 可伸缩列
* @param props
* @returns
*/
const ResizableTable = (props) => {
const [columns, setcolumn] = useState([])
useEffect(() => {
if (props.columns) {
setcolumn(props.columns)
}
}, [props.columns])
//给每一列加onResize 用于拖拽
const setNewColumnCell = (columns, indexarray) => {
columns.map((col, index) => {
let array2 = JSON.parse(JSON.stringify(indexarray))
array2.push(index)
col.onHeaderCell = (columns) => ({
width: columns.width ?? 0,
onResize: handleResize(index, array2)
})
if (col.children?.length) {
setNewColumnCell(col.children, array2)
}
})
}
const handleResize = (index, indexarray) => (e, a) => {
const {size} = a
let nextColumns =JSON.parse(JSON.stringify(columns))
const width = size?.width ?? 80
setNewColumnWidth(nextColumns, indexarray, width, [])
setcolumn(nextColumns)
}
const setNewColumnWidth = (columns, indexarray, width, nowIndex) => {
let i = 0
for (let col of columns) {
const index = i
i++
const currentLevel = indexarray?.[nowIndex.length]
if (currentLevel == index) {
console.log("当前层级", index, indexarray)
let array2 = JSON.parse(JSON.stringify(nowIndex))
array2.push(index)
if (JSON.stringify(array2) == JSON.stringify(indexarray)) {
col.width = width
break
}
if (col.children?.length) {
setNewColumnWidth(col.children, indexarray, width, array2)
}
}
}
}
const newcolumn = JSON.parse(JSON.stringify(columns))
setNewColumnCell(newcolumn, [])
console.log(newcolumn, "newcolumn")
// setlastColumn(newcolumn)
return (
<Table
bordered
components={{
header: {
cell: ResizableTitle
}
}}
size="small"
scroll={{x: "100vw"}}
columns={newcolumn}
dataSource={props.dataSource}
/>
)
}
export default ResizableTable
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>
)
}
1.2 index.less
:global {
.react-resizable {
position: relative;
background-clip: padding-box;
}
.react-resizable-handle {
position: absolute;
width: 10px;
height: 100%;
bottom: 0;
right: -5px;
cursor: col-resize;
background-image: none;
z-index: 1;
}
}
2.引入组件进行使用
<ResizableTable columns={ResettlementsColumn} dataSource={data} />
参考链接:
antd table 可伸缩列 react-resizable 多表头实现 - 简书 (jianshu.com)
标签:index,const,resizable,react,width,JSON,antd,col,columns From: https://www.cnblogs.com/domin520Jian/p/17486232.html