ant design of vue表格伸缩列

最新推荐文章于 2024-08-20 09:21:23 发布

月中行~

最新推荐文章于 2024-08-20 09:21:23 发布

阅读量427

点赞数

分类专栏：前端三框架（Vue为主）

本文链接：https://blog.csdn.net/qq_39279164/article/details/119805639

版权

本文介绍了如何在Ant Design Vue项目中实现表格列的拖动伸缩功能。通过安装vue-draggable-resizable依赖，新建JS文件并配置CSS样式，最后在Vue组件中引用，实现表格列的宽度拖动调整。注意表格需添加bordered属性，且column需包含width和dataIndex属性，width需为Number类型。

摘要由CSDN通过智能技术生成

1.安装依赖

yarn add vue-draggable-resizable@2.1.0 -D

2.新建JS文件（tableDragResize.js）

import Vue from "vue";
import VueDraggableResizable from "vue-draggable-resizable";

Vue.component("vue-draggable-resizable", VueDraggableResizable);
function initDrag(columns) {
   
  const draggingMap = {
   };
  columns.forEach((col) => {
   
    draggingMap[col.key] = col.width;
  });
  const draggingState = Vue.observable(draggingMap);
  return (h, props, children) => {
   
    let thDom =