このプロジェクトでは、要素 ui のテーブルを使用してヘッダーをドラッグして列の幅を変更し、sortablejs を使用してテーブルの列を他の列の位置にドラッグできることを認識しているため、次の問題が発生します。
1. 特定の列幅が大きくなったり小さくなったりすると、現在の列のみがドラッグでき、他の列はドラッグできなくなります。
解決策: 列幅を変更した後、現在のドラッグ インスタンスを破棄し、ドラッグ インスタンスを再作成します。
this.sortDemo.destroy()このメソッドは、sortablejs 公式 Web サイトSortable.js 中国語 Web サイトで参照できます。
2. テーブルに水平スクロール バーがない場合、特定の列幅が大きくなったり小さくなったりすると、他の列幅も大きくなったり小さくなったりします。
根本原因: Min-width はテーブルの各列に設定されています。テーブルに水平スクロール バーがなく、特定の列の幅が大きくなったり小さくなったりすると、min-width は残りの幅を min-width が設定された列に比例して配分し、テーブル全体の幅を伸ばすことができます。
結論: テーブルに水平スクロールバーがある場合、この問題は発生しません。
3. テーブルにデータがない場合、列のドラッグ アンド ドロップはできませんが、列幅を変更するとドラッグ アンド ドロップが可能になります。
解決策: テーブル データが更新された後、テーブル データ インターフェイスがデータを返すかどうかに関係なく、列をドラッグ アンド ドロップする前に、ドラッグ アンド ドロップ リスナー イベントを再マウントする必要があります。
this.reDrawTable()