Ant Design of Vue 表格使用 vue-draggable-resizabl -- 固定列问题修复

表格如果加了列拖拽功能，并且设置了列fixed。
出现了一个头疼的现象

问题：

因为拖拽需要设置width。这个时候。你屏幕宽度超过了他们设置的widht之和。Ant Des的表格自适应放宽。可是加了resizabl的列依旧是固定宽度。导致。显示了两个相同的列。还是不一样的长度

解决方式 ：

在拖拽/加载时判断是否超长。动态去掉fixed配置项

• 页面引入

1.  
   import vdr from "vue-draggable-resizable-gorkys";
2.  
   import "vue-draggable-resizable-gorkys/dist/VueDraggableResizable.css";
3.  
   import debounce from "lodash/debounce";

• :components='components'

1.  
   this.components = {
2.  
   header: {
3.  
   cell: (h, props, children) => {
4.  
   const { key, ...restProps } = props;
5.  
   // 此处的this.columns 是定义的table的表头属性变量
6.  
   const col = this.columns.find((col) => {
7.  
   const k = col.dataIndex || col.key;
8.  
   return k === key;
9.  
   });
10.  
     
11.  
    if (!col || !col.width) {
12.  
    return h("th", { ...restProps }, [...children]);
13.  
    }
14.  
    const { minWidth = 200, maxWidth } = col || {};
15.  
    const dragProps = {
16.  
    key: col.dataIndex || col.key,
17.  
    class: "",
18.  
    attrs: {
19.  
    w: col.width,
20.  
    h: "auto",
21.  
    axis: "x",
22.  
    minWidth,
23.  
    maxWidth,
24.  
    draggable: false,
25.  
    resizable: true,
26.  
    handles: ["mr"]
27.  
    },
28.  
    on: {
29.  
    resizing: (l, t, w) => {
30.  
    col.width = Math.max(w, 1);
31.  
    },
32.  
    resizestop: () => {
33.  
    this.resize();
34.  
    }
35.  
    }
36.  
    };
37.  
    const drag = h(vdr, { ...dragProps }, [...children]);
38.  
    restProps.class = " resize-table-th";
39.  
    return h(
40.  
    "th",
41.  
    {
42.  
    ...restProps
43.  
    },
44.  
    [drag]
45.  
    );
46.  
    }
47.  
    }
48.  
    };

• 重新计算表列：this.resize();

        记得给表格添加 样式：.draggable-table，设置：:scroll="{x:true}"

1.  
   // 动态计算Columns
2.  
   export function calculateColumns(columns) {
3.  
   const domTable =
4.  
   window.document.querySelector(".draggable-table .ant-table-body") || {};
5.  
   const { scrollWidth = 0,clientWidth = 0 } = domTable;
6.  
   scrollX = clientWidth < scrollWidth - 1;
7.  
   if (scrollX) {
8.  
   columns = columns.map(o => {
9.  
   if (o.fixedInit) {
10.  
    o.fixed = o.fixedInit; // 恢复浮动列配置
11.  
    }
12.  
    return o;
13.  
    });
14.  
    } else {
15.  
    columns = columns.map(o => {
16.  
    if (o.fixed) {
17.  
    o.fixedInit = o.fixed;
18.  
    o.fixed = undefined;
19.  
    }
20.  
    return o;
21.  
    });
22.  
    }
23.  
    return columns
24.  
    }

 窗口变化都要去更新
 

1.  
   mounted() {
2.  
   this.$options._resize = debounce(this.resize, 150);
3.  
   window.addEventListener("resize", this.$options._resize);
4.  
   },
5.  
   beforeDestroy() {
6.  
   window.removeEventListener("resize", this.$options._resize);
7.  
   },

样式：

1.  
   // 可拖拽表头表格样式
2.  
   .resize-table-th .vdr {
3.  
   height: 100% !important;
4.  
   width: 100% !important;
5.  
   padding: @rem7 @rem16 !important;
6.  
   border: none;
7.  
   transform: none !important;
8.  
   position: relative !important;
9.  
   }
10.  
     
11.  
    .resize-table-th {
12.  
    padding: 0 !important;
13.  
    &:hover .handle-mr {
14.  
    background: @yn-auxiliary-color;
15.  
    }
16.  
    }
17.  
     
18.  
    .resize-table-th .handle {
19.  
    cursor: col-resize;
20.  
    border: none !important;
21.  
    box-shadow: none !important;
22.  
    }
23.  
     
24.  
    .resize-table-th .handle-mr {
25.  
    width: 2px !important;
26.  
    z-index: 2;
27.  
    cursor: col-resize;
28.  
    background: inherit;
29.  
    border: none;
30.  
    height: calc(100% - @rem12) !important;
31.  
    top: @rem6 !important;
32.  
    right: 0 !important;
33.  
    display: block !important;
34.  
    }

然后不论怎么拖拽。变窗口大小。固定列都能正常展示了

这篇好文章是转载于：学新通技术网