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

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

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,

},

{

小编13年上海交大毕业，曾经在小公司待过，也去过华为、OPPO等大厂，18年进入阿里一直到现在。

深知大多数初中级前端工程师，想要提升技能，往往是自己摸索成长或者是报班学习，但自己不成体系的自学效果低效又漫长，而且极易碰到天花板技术停滞不前！
因此收集整理了一份《2024年Web前端开发全套学习资料》送给大家，初衷也很简单，就是希望能够帮助到想自学提升又不知道该从何学起的朋友，同时减轻大家的负担。

由于文件比较大，这里只是将部分目录截图出来，每个节点里面都包含大厂面经、学习笔记、源码讲义、实战项目、讲解视频

如果你觉得这些内容对你有帮助，可以添加下面V无偿领取！（备注：前端）

web浏览器中的javascript

• 客户端javascript
• 在html里嵌入javascript
• javascript程序的执行
• 兼容性和互用性
• 可访问性
• 安全性
• 客户端框架
• 开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

window对象

• 计时器

• 浏览器定位和导航

• 浏览历史

• 浏览器和屏幕信息

• 对话框

• 错误处理

• 作为window对象属性的文档元素

• 在html里嵌入javascript

• javascript程序的执行

• 兼容性和互用性

• 可访问性

• 安全性

• 客户端框架

• 开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

window对象

• 计时器

• 浏览器定位和导航

• 浏览历史

• 浏览器和屏幕信息

• 对话框

• 错误处理

• 作为window对象属性的文档元素