自己不知道怎么改,看见了老哥的文章,绝了,正好解决orz
https://blog.csdn.net/qq_34398777/article/details/106303169
问题
遇到的问题是官方可伸缩列拖动的时候太卡,究其原因是实时更新列宽,拖动的时候直接更新所有列宽,当列较多的时候更新的数据响应也会比较多,但做法是官方的延申
{
"dependencies": {
"@testing-library/jest-dom": "^4.2.4",
"@testing-library/react": "^9.3.2",
"@testing-library/user-event": "^7.1.2",
"antd": "^4.2.2",
"react": "^16.13.1",
"react-dom": "^16.13.1",
"react-resizable": "^1.10.1",
}
}
import React, { useState } from 'react'
import { Resizable } from 'react-resizable'
import classnames from 'classnames'
const ResizeableTitle = (props) => {
const { onResize, width, ...restProps } = props
// 添加偏移量
const [offset, setOffset] = useState(0)
if (!width) {
return <th {...restProps} />
}
return (
<Resizable
// 宽度重新计算结果,表头应当加上偏移量,这样拖拽结束的时候能够计算结果;
// 当然在停止事件再计算应当一样,我没试过(笑)
width={width + offset}
height={0}
handle={
<span
// 有偏移量显示竖线
className={classnames(['react-resizable-handle', offset && 'active'])}
// 拖拽层偏移
style={{ transform: `translateX(${offset}px)` }}
onClick={(e) => {
// 取消冒泡,不取消貌似容易触发排序事件
e.stopPropagation()
e.preventDefault()
}}
/>
}
// 拖拽事件实时更新
onResize={(e, { size }) => {
// 这里只更新偏移量,数据列表其实并没有伸缩
setOffset(size.width - width)
}}
// 拖拽结束更新
onResizeStop={(...argu) => {
// 拖拽结束以后偏移量归零
setOffset(0)
// 这里是props传进来的事件,在外部是列数据中的onHeaderCell方法提供的事件,请自行研究官方提供的案例
onResize(...argu)
}}
draggableOpts={{ enableUserSelectHack: false }}
>
<th {...restProps} />
</Resizable>
)
}
export const tableComponent = {
header: {
cell: ResizeableTitle,
},
}
.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;
}
/** 这里是偏移的时候显示的竖线,只有表头有竖线;
如果需要联通表格请自行修改高度,1000倍表头高度,然后超出表格隐藏什么的(自行研究) */
.react-resizable-handle.active::before {
content: '';
position: absolute;
left: 50%;
top: 0;
bottom: 0;
border-left: solid 1px black;
}
然后把自己的东西按照他的改了
const ResizeableTitle = (props) => {
const { onResize, width, ...restProps } = props;
const [offset, setOffset] = useState(0);
if (!width) {
return <th {...restProps} />;
}
return (
<Resizable
// 宽度重新计算结果 ,表头应当加上偏移量,这样拖拽结束的时候能够计算结果;
// 当然在停止事件再计算应当一样,我没试过(笑)
width={width + offset}
height={0}
handle={
<span
className={"react-resizable-handle" + (offset == 0 ? " " : " active")}
style={{ transform: `translateX(${offset}px)` }}
onClick={(e) => {
// 取消冒泡,不取消貌似容易触发排序事件
e.stopPropagation();
e.preventDefault();
}}
/>
}
// 拖拽事件实时更新
onResize={(e, { size }) => {
// 这里只更新偏移量,数据列表其实并没有伸缩
setOffset(size.width - width);
}}
// 拖拽结束更新
onResizeStop={(...argu) => {
// 拖拽结束以后偏移量归零
setOffset(0);
// 这里是props传进来的事件,在外部是列数据中的onHeaderCell方法提供的事件,请自行研究官方提供的案例
onResize(...argu);
}}
draggableOpts={{ enableUserSelectHack: false }}
>
<th {...restProps} />
</Resizable>
);
};
function ArticleList(props) {
const [isLoading, setIsLoading] = useState(false);
const [articleList, setArticleList] = useState([{}]);
const [Columns, setColumns] = useState([{}]);
const modelStatusRef = useRef(null);
const getList = () => {
setIsLoading(true);
axios({
method: "get",
url: servicePath.getArticleList,
withCredentials: true,
}).then(async (res) => {
//console.log(res);
setIsLoading(false);
let list = await res.data.list.map((a) => {
let b = a.addtime;
b = moment(+b).format("YYYY-MM-DD"); //把时间戳format成需要的格式
a._addtime = b; //保留原始时间戳为addtime,转换后的为_addtime
return a;
});
setArticleList(list);
//console.log(res.data.list)
});
};
const delArticle = (id) => {
confirm({
title: `确定删除(id:${id})?`,
content: "ok--删除",
onOk() {
console.log(servicePath.deleteArticle + `${id}`);
axios({
method: "get",
url: servicePath.deleteArticle + id,
withCredentials: true,
}).then((res) => {
//console.log(res)
message.success("删除成功");
getList();
});
},
onCancel() {
message.info("取消删除");
},
});
};
const changeArticle = (id) => {
props.history.push(`/adminIndex/changeArticle/${id}`);
};
const getListBytitle = (title) => {
setIsLoading(true);
axios({
method: "get",
url: servicePath.getArticleListBytitle + title,
withCredentials: true,
}).then(async (res) => {
//console.log(res);
setIsLoading(false);
let list = await res.data.list.map((a) => {
let b = a.addtime;
b = moment(+b).format("YYYY-MM-DD"); //把时间戳format成需要的格式
a._addtime = b; //保留原始时间戳为addtime,转换后的为_addtime
return a;
});
setArticleList(list);
//console.log(res.data.list)
});
};
useEffect(() => {
getList();
let columns = [
{
title: "标题",
dataIndex: "title",
width: 300,
},
{
title: "类型",
dataIndex: "typename",
width: 100,
},
{
title: "发布时间",
dataIndex: "_addtime",
width: 150,
sorter: (a, b) => a.addtime - b.addtime,
},
{
title: "浏览量",
dataIndex: "viewcount",
width: 100,
sorter: (a, b) => a.viewcount - b.viewcount,
},
{
title: "操作",
key: "action",
render: (item) => (
<Col span={24}>
<Button
type='link'
onClick={() => {
console.log(item);
changeArticle(item.id);
}}
>
修改
</Button>
<Button
type='link'
onClick={() => {
delArticle(item.id);
}}
>
删除
</Button>
</Col>
),
},
];
columns = columns.map((col, index) => ({
...col,
onHeaderCell: (column) => ({
width: column.width,
onResize: handleResize(index),
}),
}));
setColumns(columns);
}, []);
useEffect(() => {
// 每次 更新 把值 复制给 modelStatusRef
modelStatusRef.current = Columns;
}, [Columns]); // 依赖的值 等modelStatus 改变了 才出发里面的值
const handleResize = (index) => (e, { size }) => {
//console.log(modelStatusRef.current)
console.log(size);
const nextColumns = [...modelStatusRef.current];
nextColumns[index] = {
...nextColumns[index],
width: size.width,
};
setColumns(nextColumns);
console.log(Columns, nextColumns);
};
const components = {
header: {
cell: ResizeableTitle,
},
};
return (
<div>
<Search
placeholder='search article'
onSearch={(value) => {
getListBytitle(value);
}}
style={{ width: 200 }}
/>
<Button
style={{ float: "right" }}
type='dashed'
onClick={() => {
props.history.push("/adminIndex/addArticle");
}}
>
+
</Button>
<Table
bordered
components={components}
columns={Columns}
dataSource={articleList}
pagination={{ pageSize: 5 }}
loading={isLoading}
/>
</div>
);
}