成果を達成する最初は、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 をよろしくお願いいたします。 以下もご興味があるかもしれません:
|
Ubuntu に jdk をインストールする: [リンク] UbuntuにEclipseをインストー...
js 実行字句解析フェーズ: 形式パラメータ解析、変数宣言解析、関数宣言解析の 3 つの部分が含まれ...
Apache では構成ファイルで Web ページまたは Web サイトの書き換えを簡単に設定できる...
目次動画最優秀選手ムヴヴムVueのソーススパ mpa要素を作成するクラス要約する動画 Model(模...
変換して翻訳するTransform は、変換と変形を意味します。他の幅属性や高さ属性と同様に、CSS...
通常の開発では、凸型の丸い角、つまり border-radius 属性を使用するのが一般的です。凹角...
最近、センタリングの問題に数多く遭遇したので、後で簡単に見つけられるように、時間をかけてそれらを要約...
今日、インターフェースの同時実行の問題を検証したところ、これまでredisで解決していた同時実行のプ...
序文最近、CentOS 7 で MySQL 5.7.23 をアップグレードする際に落とし穴を発見しま...
CSS は div にスクロールを追加し、スクロール バーを非表示にします。具体的なコードは次のとお...
Windows システムと比較して、Linux システムは多数の豊富なコマンドライン ツールを提供し...
テストテーブルを作成する -- ---------------------------- -- ch...
序文みなさんこんにちは。CSS ウィザードの alphardex です。この記事では、three.j...
1. ポート 80 が占有されているかどうかを確認します。通常、ポート 80 は Apache サー...
HTML CSS および JavaScript を使用して、プラス、マイナス、ゼロの 3 つのボタン...