技術標籤：ant design vue tablevue.js

在data中的columns中每一列會有固定的寬度（如果不給定寬度，拉拽則不起作用）。如果是這樣的結果那麼我們需要根據文件來設定components以及結合《vue-draggable-resizable》外掛。
在data資料中定義，

data （）{
    return {
        components: { header: { cell: this.changeTitle } },
    }
}
methods（）{
   changeTitle(h, props, children) {
      let
 
 draggingState = {};
      this.columns.forEach(col => {
        draggingState[col.key] = col.width;
      });

      const { key, ...restProps } = props;
      let thDom = null;
      const col = this.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, 10);
      };

      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.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>
      );
    },
}

大家有興趣可以嘗試一下。有什麼問題，歡迎在樓下評論。