antd的可伸缩列用hooks重构后难用的坑

}

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 }}

)

}

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 }}

);

};

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(“删除成功”);

《大厂前端面试题解析+Web核心总结学习笔记+企业项目实战源码+最新高清讲解视频》无偿开源 徽信搜索公众号【编程进阶路】 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;