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

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

问题：

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

 

解决方式 ：

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

• 页面引入

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

• :components='components'

    this.components = {
      header: {
        cell: (h, props, children) => {
          const { key, ...restProps } = props;
          // 此处的this.columns 是定义的table的表头属性变量
          const col = this.columns.find((col) => {
            const k = col.dataIndex || col.key;
            return k === key;
          });

          if (!col || !col.width) {
            return h("th", { ...restProps }, [...children]);
          }
          const { minWidth = 200, maxWidth } = col || {};
          const dragProps = {
            key: col.dataIndex || col.key,
            class: "",
            attrs: {
              w: col.width,
              h: "auto",
              axis: "x",
              minWidth,
              maxWidth,
              draggable: false,
              resizable: true,
              handles: ["mr"]
            },
            on: {
              resizing: (l, t, w) => {
                col.width = Math.max(w, 1);
              },
              resizestop: () => {
                this.resize();
              }
            }
          };
          const drag = h(vdr, { ...dragProps }, [...children]);
          restProps.class += " resize-table-th";
          return h(
            "th",
            {
              ...restProps
            },
            [drag]
          );
        }
      }
    };

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

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

// 动态计算Columns
export function calculateColumns(columns) {
  const domTable =
    window.document.querySelector(".draggable-table .ant-table-body") || {};
  const { scrollWidth = 0,clientWidth = 0 } = domTable;
  scrollX = clientWidth < scrollWidth - 1;
  if (scrollX) {
    columns = columns.map(o => {
      if (o.fixedInit) {
        o.fixed = o.fixedInit; // 恢复浮动列配置
      }
      return o;
    });
  } else {
    columns = columns.map(o => {
      if (o.fixed) {
        o.fixedInit = o.fixed;
        o.fixed = undefined;
      }
      return o;
    });
  }
  return columns
}

 窗口变化都要去更新
 

  mounted() {
    this.$options._resize = debounce(this.resize, 150);
    window.addEventListener("resize", this.$options._resize);
  },
  beforeDestroy() {
    window.removeEventListener("resize", this.$options._resize);
  },

样式：

// 可拖拽表头表格样式
.resize-table-th .vdr {
  height: 100% !important;
  width: 100% !important;
  padding: @rem7 @rem16 !important;
  border: none;
  transform: none !important;
  position: relative !important;
}

.resize-table-th {
  padding: 0 !important;
  &:hover .handle-mr {
    background: @yn-auxiliary-color;
  }
}

.resize-table-th .handle {
  cursor: col-resize;
  border: none !important;
  box-shadow: none !important;
}

.resize-table-th .handle-mr {
  width: 2px !important;
  z-index: 2;
  cursor: col-resize;
  background: inherit;
  border: none;
  height: calc(100% - @rem12) !important;
  top: @rem6 !important;
  right: 0 !important;
  display: block !important;
}

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