修改已知bug1

2022-06-02 14:53:00 +08:00
parent 7469c0a236
commit de2ed1eb60
15 changed files with 141 additions and 39 deletions
@@ -0,0 +1,58 @@
+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 = null;
+    const { key, ...restProps } = props;
+    const col = columns.find(col => {
+      const k = col.dataIndex || col.key;
+      return k === key;
+    });
+    if (!col || !col.width) {
+      return <th {...restProps}>{children}</th>;
+    }
+    const onDrag = x => {
+      draggingState[key] = 0;
+      col.width = Math.max(x, 1);
+    };
+
+    const onDragstop = () => {
+      draggingState[key] = thDom.getBoundingClientRect().width;
+    };
+    return (
+      <th {...restProps} v-ant-ref={r => (thDom = r)} width={col.width} class="resize-table-th">
+      {children}
+      <vue-draggable-resizable
+    key={col.dataIndex || col.key}
+  class="table-draggable-handle"
+    w={10}
+    x={draggingState[key] || col.width}
+    z={1}
+    axis="x"
+    draggable={true}
+    resizable={false}
+    onDragging={onDrag}
+    onDragstop={onDragstop}
+      ></vue-draggable-resizable>
+      </th>
+  );
+  };
+}
+export default {
+  methods: {
+    drag(columns) {
+      return {
+        header: {
+          cell: initDrag(columns),
+        },
+      };
+    },
+  },
+};