成果を達成する最初は、antdesign をベースにしたものがあるかどうかをオンラインで調べようと思ったのですが、本当にほとんどないことがわかりました。では、早速写真をご覧ください。 sortablejs の紹介まず、このプラグインについて知っておきましょう: sortablejs ここでは私が使用した API に焦点を当てます。
put : put は、リスト コンテナーにリスト セルを配置するための設定を定義するために使用されます (true/false/['foo','bar']/function)。
2. 具体的な実装1. 最初のステップは、 <s-テーブル ref="テーブル" サイズ="デフォルト" クラス="左テーブル" rowKey="キー" :columns="列" :data="データをロード"> </s-テーブル> <s-テーブル クラス="ソートテーブル" ref="テーブル2" サイズ="デフォルト" クラス="左テーブル" rowKey="キー" :columns="列" :data="データをロード"> </s-テーブル> 特定の列とloadData については詳しく説明する必要はありません。 JSコード 'sortablejs' から Sortable をインポートします。 方法:{ // ドラッグを実装するためにソート可能を初期化する initSortable () { var that = これ var el = this.$el.querySelector('.sort-table tbody') ソート可能.create(el, { ハンドル: '.ant-table-row', アニメーション: 150, グループ: { 名前: 'name'、プル: true、プット: true }、 onUpdate: 関数 (evt) { }, // ドラッグ開始時 onStart: function (evt) { }, onAdd: 関数 (イベント) { }, onRemove: 関数 (evt) { } }) }, ソート可能な初期化1(){ var that = これ var el = this.$el.querySelector('.left-table tbody') ソート可能.create(el, { ハンドル: '.ant-table-row', アニメーション: 150, グループ: { 名前: 'name'、プル: true、プット: true }、 onUpdate: 関数 (evt) { }, // ドラッグ開始時 onStart: function (evt) { }, onAdd: 関数 (イベント) { }, onRemove: 関数 (evt) { } }) }, } 今のところ2テーブル間でドラッグ効果を実現できますが、それはドラッグ効果のみです。 右側のテーブルではソートが固有ですが、このテーブルではこのソートは必要ありません。ドラッグが成功したのに、なぜまだデータがないと表示されるのでしょうか。最後に、左側のヘッダーの
パフォーマンスの消費を考慮して、2 番目を選択しました。 データ(){ 戻る { unMatchedList: [], // 左側の一致しないデータ dataList: [], // 右側の一致するデータ pullIndex: '', // 元の配列ドラッグ要素のインデックス} } 2) // ドラッグ開始時 onStart: function (evt) { that.pullIndex = evt.oldIndex }, onAdd: 関数 (イベント) { //evt.newIndex は新しい配列のインデックスに移動します //pullIndex は元の配列内のドラッグされた要素のインデックスです that.dataList.splice(evt.newIndex, 0, that.unMatchedList[that.pullIndex]) that.dataList.forEach((item, index) => { アイテム.ソート = インデックス + 1 }) //テーブルビューに更新を通知します。$nextTick(() => { that.$refs.table2 && this.$refs.table2.refresh(true) that.$refs.table && this.$refs.table.refresh(true) }) }, onRemove: 関数 (evt) { that.dataList.splice(evt.oldIndex, 1) that.dataList.forEach((item, index) => { アイテム.ソート = インデックス + 1 }) $nextTick(() => { that.$refs.table2 && this.$refs.table2.refresh(true) that.$refs.table && this.$refs.table.refresh(true) }) } }) 3) 同じテーブル内でドラッグアンドドロップによる並べ替えを実装する ソート可能な初期化(){ var that = これ var el = this.$el.querySelector('.sort-table tbody') ソート可能.create(el, { ハンドル: '.ant-table-row', アニメーション: 150, グループ: { 名前: 'name'、プル: true、プット: true }、 //ここではonEndメソッドを使用しないでください onUpdate: function (evt) { var o = evt.oldIndex var n = evt.newIndex (o === n)の場合{ 戻る } that.sortListAndUpdate(that.dataList, o, n) }, }) }, // o (oldIndex) と n (newIndex) が 0 から始まるようにデータをソートします sortList (list, o, n) { var newTableData = JSON.parse(JSON.stringify(リスト)) var データ = newTableData.splice(o, 1, null) newTableData.splice(o < n ? n + 1 : n, 0, data[0]) newTableData.splice(o > n ? o + 1 : o, 1) 新しいテーブルデータを返す }, /** * データをソートしてテーブルを更新します。o (oldIndex) と n (newIndex) は 0 から始まる必要があります*/ ソートリストと更新 (リスト, o, n) { var newTableData = this.sortList(リスト、o、n) newTableData.forEach((アイテム、インデックス) => { アイテム.ソート = インデックス + 1 }) this.$nextTick(() => { this.dataList = 新しいテーブルデータ that.$refs.table2 && this.$refs.table2.refresh(true) }) }, ここでは、ドラッグ効果がある限り これで、antdesign-vue と sortablejs を組み合わせて、2 つのテーブルをドラッグして並べ替える機能を実現する方法についての説明は終わりです。antdesign-vue でドラッグ アンド ソートを実現する方法についての関連コンテンツをさらにご覧になりたい場合は、123WORDPRESS.COM の以前の記事を検索するか、以下の関連記事を引き続きご覧ください。今後とも 123WORDPRESS.COM をよろしくお願いいたします。 以下もご興味があるかもしれません:
|
1. フォントと文字表示の関係左側と右側の鋭角部分は Songti フォントで表示されます: &l...
1. システムの Python バージョンに応じて、pip インストール パッケージをダウンロードし...
この記事では、参考までに、計算機を実装するためのWeChatアプレットの具体的なコードを紹介します。...
目次1. html2Canvasをインストールする2. 必要なVueコンポーネントを導入する3. ス...
序文この記事では主に、curl を介してフォーム送信ログインを実装する方法について説明します。単一の...
ブラウザウィンドウの中央に要素を配置する方法まず、コード ブロックを示します。すでにコードを理解して...
まず効果を見てみましょう: コード: 1.html <div class="user...
1. Howdyをインストール: howdyプロジェクトアドレス sudo add-apt-repo...
目次古典的なアプローチ質問その他の質問注意が必要な問題古典的なアプローチご存知のとおり、アカウントの...
目次MySQLクラッシュ回復プロセス1. ブラックボックス下のデータフローを更新する2. やり直しロ...
コマンドライン mysqld –skip-grant-tables は mysql8 では正常に起動...
1. ツールとライブラリをインストールする# PCRE は、Perl 互換の正規表現ライブラリを含...
序文この記事では、Windows 10 システムで MySQL を完全に削除してアンインストールする...
最近、サーバーのストレステストを再度行う必要が出てきました。ここでは、最近学んだ見積もりスキームと見...
VMware仮想マシンでのCentos7ブリッジネットワーク構成の完全な手順は参考用です。具体的な内...