スケーラブルな列の完全な例を実現するための Ant 設計 Vue テーブル

.resize-table-th {
    位置: 相対的;
    .table-ドラッグ可能なハンドル {
      高さ: 100% !重要;
      下部: 0;
      左: -5px !重要;
      カーソル: col-resize;
      タッチアクション: なし;
      位置: 絶対;
    }
  }

定数 loopDom = ss => {
  ss.previousSibling !== null の場合 {
    thDomIndex++;
    loopDom(ss.previousSibling);
  }
};

関数 resetFixedColumns(幅) {
  const fixedHead = document.querySelector(".ant-table-fixed-left .ant-table-header");
  const fixedBody = document.querySelector(".ant-table-fixed-left .ant-table-body-outer .ant-table-fixed");
  if (固定ヘッド) {
    fixedHead.style.width = 幅 + "px";
    fixedBody.style.width = 幅 + "px";
  }
}

getDraggingMap(tbCols、ドラッグマップ) {
      tbCols.forEach(列 => {
        if (col.children) {
          this.getDraggingMap(col.children, draggingMap);
        } それ以外 {
          const key = col.dataIndex || col.key; //テーブルデータにはこれらの 2 つの属性が必要です draggingMap[key] = col.width || 0;
        }
      });
    },

// マルチレベルヘッダーの処理 getRenderCoL(key, tbCols) {
      結果 = "" とします。
      this._.forEach(tbCols, 項目 => {
        if (item.children) {
          結果 = this.getRenderCoL(キー、item.children);
          !結果を返します。
        } それ以外 {
          const k = item.dataIndex || item.key;
          if (k === キー) {
            結果 = アイテム;
            false を返します。
          }
        }
      });
      結果を返します。
    }

 定数 loopDom = (cols, col) => {
          タグを true にします。
          this._.forEach(cols, co => {
            co.dataIndex == col.dataIndexの場合{
              thDomIndex++;
              タグ = false;
              戻りタグ;
            }
            if (co.children) {
              タグ = loopDom(co.children, col);
              戻りタグ;
            } それ以外 {
              thDomIndex++;
            }
          });
          戻りタグ;
        };

:components="ドラッグ(列キー)"

//mixins/tableDragResize.js
「vue」からVueをインポートします。
「vue-draggable-resizable」から VueDraggableResizable をインポートします。
Vue.component("vue-draggable-resizable", VueDraggableResizable);

エクスポートデフォルト{
  データ（） {
    戻る {
      最大レベル: 1
    };
  },
  メソッド: {
    ドラッグ(列) {
      戻る {
        ヘッダー: {
          セル: this.initDrag(列)
        }
      };
    },
    /**
     * @param { テーブル列 } tbCols
     */
    initDrag(tbCols) {
      ドラッグマップを {} にします。
      this.getDraggingMap(tbCols, draggingMap, 1);
      draggingState を Vue.observable(draggingMap) にします。
      戻り値 (h, props, children) => {
        thDomIndex = 0 とします。
        const { キー、...restProps } = props;
        col = {} とします。
        // マルチレベル ヘッダーの処理 col = this.getRenderCoL(key, tbCols);
        列の幅が等しい場合
          //ここで、テーブル データには width 属性が必要です。そうでない場合、次のドラッグは実行されません。 return <th {...restProps}>{children}</th>;
        }
        定数onDrag = x => {
          列の幅 = Math.max(x, 1);
          ドラッグ状態[キー] = col.width;
          ドメインインデックス = 0;
          loopDom(tbCols, col);
          チェックありの場合
            ドメインインデックス--;
          }
          colgroup を document.querySelectorAll("colgroup") とします。
          colgroup.forEach(要素 => {
            childCol を Element.children とします。
            childCol[thDomIndex]の場合、childCol[thDomIndex].style.width = col.width + "px";
          });
          this.resetFixedColumns(列の幅);
        };
        定数 loopDom = (cols, col) => {
          タグを true にします。
          this._.forEach(cols, co => {
            co.dataIndex == col.dataIndexの場合{
              thDomIndex++;
              タグ = false;
              戻りタグ;
            }
            if (co.children) {
              タグ = loopDom(co.children, col);
              戻りタグ;
            } それ以外 {
              thDomIndex++;
            }
          });
          戻りタグ;
        };
        定数onDragstop = () => {};

        戻る （
          <th {...restProps} width={draggingState[key]} class="resize-table-th" dataIndex={col.key}>
            {子供たち}
            <vue-ドラッグ可能-サイズ変更可能
              キー={col.dataIndex || col.key}
              クラス="テーブルドラッグ可能ハンドル"
              w={20}
              h = {this.getResizableHandler(col)}
              x={ドラッグ状態[キー]}
              100 は
              軸="x"
              ドラッグ可能={true}
              サイズ変更可能={false}
              onDragging={onDrag}
              onDragstop={onDragstop}
            </vue-ドラッグ可能-サイズ変更可能>
          </th>
        );
      };
    },
    getResizableHandler(col) {
      // baseH = thDom.getBoundingClientRect().height; とします。
      size を this.cellsize とします。this.cellsize : this.attrBute.cellsize;
      baseH を size == "middle" ? 47 とします : size == "small" ? 39 : 55;
      col.isEndNode の場合、baseH * col.nodeLevel を返します。
      そうでない場合 (col.leafNode && col.nodeLevel < this.maxLevel) {
        baseH * this.maxLevel を返します。
      } それ以外の場合は baseH を返します。
    },
    固定列幅をリセットする(幅)
      const fixedHead = document.querySelector(".ant-table-fixed-left .ant-table-header");
      const fixedBody = document.querySelector(".ant-table-fixed-left .ant-table-body-outer .ant-table-fixed");
      if (固定ヘッド) {
        fixedHead.style.width = 幅 + "px";
        fixedBody.style.width = 幅 + "px";
      }
    },
    getDraggingMap(tbCols、draggingMap、nodeLevel) {
      tbCols.forEach((列、インデックス) => {
        col.nodeLevel = ノードレベル;
        col.isEndNode = インデックス == tbCols.length - 1;
        this.maxLevel = Math.max(this.maxLevel、ノードレベル);
        if (col.children) {
          col.leafNode = false;
          this.getDraggingMap(col.children, draggingMap, nodeLevel + 1);
        } それ以外 {
          col.leafNode = true;
          const key = col.dataIndex || col.key; //テーブルデータにはこれらの 2 つの属性が必要です draggingMap[key] = col.width || 0;
        }
      });
    },
    getRenderCoL(キー、tbCols) {
      結果 = "" とします。
      this._.forEach(tbCols, 項目 => {
        if (item.children) {
          結果 = this.getRenderCoL(キー、item.children);
          !結果を返します。
        } それ以外 {
          const k = item.dataIndex || item.key;
          if (k === キー) {
            結果 = アイテム;
            false を返します。
          }
        }
      });
      結果を返します。
    }
  }
};

getDraggingMap(tbCols、draggingMap、nodeLevel) {
tbCols.forEach((列、インデックス) => {
col.nodeLevel = ノードレベル;
col.isEndNode = インデックス == tbCols.length - 1;
this.maxLevel = Math.max(this.maxLevel、ノードレベル);
if (col.children) {
col.leafNode = false;
this.getDraggingMap(col.children, draggingMap, nodeLevel + 1);
} それ以外 {
col.leafNode = true;
const key = col.dataIndex || col.key; //テーブルデータにはこれらの 2 つの属性が必要です draggingMap[key] = col.width || 0;
}
});
},

h = {this.getResizableHandler(col)}

getResizableHandler(col) {
      // baseH = thDom.getBoundingClientRect().height; とします。
      size を this.cellsize とします。this.cellsize : this.attrBute.cellsize;
      baseH を size == "middle" ? 47 とします : size == "small" ? 39 : 55;
      col.isEndNode の場合、baseH * col.nodeLevel を返します。
      そうでない場合 (col.leafNode && col.nodeLevel < this.maxLevel) {
        baseH * this.maxLevel を返します。
      } それ以外の場合は baseH を返します。
    },