Vue Element Sortablejs を使用してテーブル列をドラッグする詳細な説明

Vue Element Sortablejs を使用してテーブル列をドラッグする詳細な説明

1. css: ドラッグテーブル.css

@charset "UTF-8";
 
.w-テーブル{
  高さ: 100%;
  幅: 100%;
  フロート: 左;
}
/* ドラッグ中のマウス表示スタイル*/
.w-table_moving .el-table th .thead-cell{
  カーソル: 移動 !important;
}
.w-table_moving .el-table__fixed{
  カーソル: 許可されていません。
}
.w-テーブル .thead-セル{
  ディスプレイ: インラインフレックス;
  flex-direction: 列;
  アイテムの位置を中央揃えにします。
  幅: 自動;
  最大高さ: 23px;
  垂直位置合わせ: 中央;
  オーバーフロー: 初期値;
  位置: 相対的;
}

2. コンポーネントをカプセル化する: dragTable.vue

<テンプレート>
    <div class="w-table" :class="{'w-table_moving': dragState.dragging}">
        <el-table :data="データ"
                  :ref="オプション.ref"
                  :class="オプション.class"
                  :stripe="オプション.stripe"
                  :border="オプション.border"
                  :height="オプションの高さ"
                  :max-height="option.maxHeight"
                  現在の行をハイライト
                  :style="{ width: parseInt(option.width)+'px' }" :cell-class-name="セルクラス名"
                  :header-cell-class-name="ヘッダーセルクラス名"
                  @sort-change="option.sortChange"
        >
            <スロット名="固定"></スロット>
 
            <template v-for="(col, index) in tableHeader">
                <el-table-column :label="col.label" :key="index" :prop="col.prop" :width="col.width" v-if="col.useTemplate==true">
                    <テンプレート スロット スコープ="スコープ">
                        <span v-html=col.useTemplateRes(scope.row)></span>
                    </テンプレート>
                </el-table-column>
                <el-テーブル列v-else
                                 :key="インデックス"
                                 :prop="col.prop"
                                 :label="列ラベル"
                                 :width="列幅"
                                 :min-width="列の最小幅"
                                 :type="列タイプ"
                                 :sortable="col.sortable"
                                 :header-align="col.headerAlign"
                                 :align="列揃え"
                                 :列キー="index.toString()"
                                 :render-header="レンダリングヘッダー"
                                 オーバーフローツールチップを表示
                                 :formatter="col.formatter"
                >
                </el-table-column>
                <el-table-column :label="v.name" :key="k" :prop="v.prop" :width="v.width" v-else></el-table-column>
            </テンプレート>
 
 
            <!--<el-table-column v-for="(col, index) in tableHeader" :key="index"
                             :prop="col.prop"
                             :label="列ラベル"
                             :width="列幅"
                             :min-width="列の最小幅"
                             :type="列タイプ"
                             :sortable="col.sortable"
                             :header-align="col.headerAlign"
                             :align="列揃え"
                             :列キー="index.toString()"
                             :render-header="レンダリングヘッダー"
                             オーバーフローツールチップを表示
                             :formatter="col.formatter"
            >
            </el-table-column>-->
        </el-table>
    </div>
</テンプレート>
 
<スクリプト>
    'sortablejs' から Sortable をインポートします。
    エクスポートデフォルト{
        名前: ""、
        データ () {
            戻る {
                テーブルヘッダー: this.header、
                ドラッグ状態: {
                    start: -9, // 開始要素のインデックス
                    end: -9, // マウスを動かしたときにカバーされる要素のインデックス
                    dragging: false, // ドラッグしているか direction: undefined // ドラッグ方向 }
            }
        },
        小道具: {
            データ: {
                デフォルト: 関数() {
                    戻る []
                },
                タイプ: 配列
            },
            ヘッダー: {
                デフォルト: 関数() {
                    戻る []
                },
                タイプ: 配列
            },
            オプション: {
                デフォルト: 関数() {
                    戻る {}
                },
                タイプ: オブジェクト
            }
        },
        マウント() {
 
        },
        時計:
            ヘッダー (val, oldVal) {
                this.tableHeader = val
            }
        },
        メソッド: {
 
            レンダリングヘッダー (createElement、{列}) {
                要素の作成を返す(
                    'div', {
                        'クラス': ['ヘッドセル'],
                        の上: {
                            マウスダウン: ($event) => { this.handleMouseDown($event, column) },
                            マウス移動: ($event) => { this.handleMouseMove($event, column) }
                        }
                    }, [
                        // ヘッダーラベルを表示するために <a> を追加します
                        要素を作成します('span', 列.ラベル),
                        // ドラッグアニメーションを表示するための空のタグを追加します createElement('span', {
                            'クラス': ['仮想']
                        })
                    ])
            },
            // マウスを押してドラッグを開始します handleMouseDown (e, column) {
                this.dragState.dragging = true
                this.dragState.start = parseInt(column.columnKey)
                // ドラッグ中に仮想コンテナに幅と高さを追加します。let table = document.getElementsByClassName('w-table')[0]
                仮想 = document.getElementsByClassName('virtual') とします。
                for (let 仮想アイテム) {
                    item.style.height = table.clientHeight - 1 + 'px'
                    // item.style.width = item.parentElement.parentElement.clientWidth + 'px'
                    item.style.width = item.parentElement.clientWidth + 'px'
                }
                document.addEventListener('mouseup', this.handleMouseUp);
            },
 
            // ドラッグを終了するにはマウスを放します。handleMouseUp() {
                this.dragColumn(this.dragState)
                // ドラッグ状態を初期化する this.dragState = {
                    開始: -9,
                    終了: -9,
                    ドラッグ: false、
                    方向: 未定義
                }
                document.removeEventListener('mouseup', this.handleMouseUp);
            },
 
            //ドラッグ handleMouseMove (e, column) {
                if (this.dragState.dragging) {
                    let index = parseInt(column.columnKey) // 開始列を記録します if (index - this.dragState.start !== 0) {
                        this.dragState.direction = index - this.dragState.start < 0 ? 'left' : 'right' // ドラッグ方向を決定します this.dragState.end = parseInt(column.columnKey)
                    } それ以外 {
                        this.dragState.direction = 未定義
                    }
                } それ以外 {
                    偽を返す
                }
            },
 
            // ドラッグして位置を変更する dragColumn ({start, end, direction}) {
                tempData = [] とします
                左 = 方向 === '左' とします
                min = left ? end : start - 1 とします。
                max = left ? start + 1 : end とします。
                (i = 0 とします; i < this.tableHeader.length; i++) {
                    if (i === 終了) {
                        tempData.push(this.tableHeader[start])
                    } そうでない場合 (i > min && i < max) {
                        tempData.push(this.tableHeader[left?i-1:i+1])
                    } それ以外 {
                        tempData.push(this.tableHeader[i])
                    }
                }
                this.tableHeader = tempData
            },
            ヘッダーセルクラス名 ({列、列インデックス}) {
                active = columnIndex - 1 === this.dragState.end ? `darg_active_${this.dragState.direction}` : '' とします。
                start = columnIndex - 1 === this.dragState.start ? `darg_start` : '' とします。
                `${active} ${start}` を返す
            },
 
            セルクラス名 ({列, 列インデックス}) {
                戻り値 (columnIndex - 1 === this.dragState.start ? `darg_start` : '')
            },
 
 
 
 
 
 
 
        },
    }
</スクリプト>
 
<スタイル>
    @import '~@/assets/css/dragTable.css';
 
 
 
</スタイル>

3. パッケージコンポーネントの呼び出し

<テンプレート>
    <div>
        <wTable :data="WarnResTable_Data_SS" :header="tableHeaderSS" :option="tableOptionSS">
            <el-テーブル列
                    タイプ="インデックス"
                    スロット="固定"
                    修理済み
                    プロパティ=""
                    label="シリアル番号"
                    align="center"
                    幅= "60"
            >
            </el-table-column>
            <el-テーブル列
                    ラベル="操作"
                    スロット="固定"
                    修理済み
                    プロパティ=""
                    幅="95"
                    align="center">
                <テンプレート スロット スコープ="スコープ">
                    <el-ボタン
                            サイズ="ミニ"
                            @click="lookDetails(scope.$index, scope.row)">表示</el-button>
                </テンプレート>
            </el-table-column>
        </wテーブル>
    </div>
</テンプレート>
 
<スクリプト>
    '../../components/dragTable/dragTable' から wTable をインポートします。
    エクスポートデフォルト{
        名前: 'テーブル'、
        データ () {
            戻る {
                テーブルオプションSS: {
                    境界線: true、
                    ストライプ: true、
                    ref:'WarnResSSTable',
                    クラス:'pms-table',
                    最大高さ: "100%",
                    高さ: "100%",
                    ソート変更:this.changeTableSortSS
                },
                テーブルヘッダーSS: [
                    {
                        ラベル: '都市名'、
                        プロパティ: 'dsmc',
                        ソート可能: true、
                        配置: '中央',
                        幅:'200',
                    },
                    {
                        ラベル: 「運用保守ユニット」、
                        プロパティ: 'ywdw'、
                        配置: '中央',
                        幅:'200',
                    },
                    {
                        ラベル: '変電所'、
                        プロパティ: 'bdzmc',
                        配置: '中央',
                        幅:'170',
                    },
                    {
                        ラベル: 'デバイス名'、
                        プロパティ: 'sbmc',
                        ソート可能: true、
                        配置: '中央',
                        幅:'150',
                    },
                    {
                        ラベル: '警告パラメータ'、
                        プロパティ: 'yjcs',
                        配置: '中央',
                        幅:'150',
                    },
                    {
                        ラベル: '警告タイプ'、
                        プロパティ: 'yjlx',
                        配置: '中央',
                        幅:'140',
                    },
                    {
                        ラベル: 「最初の警告時間」、
                        プロパティ: 'scyjsj',
                        ソート可能:true、
                        配置: '中央',
                        幅:'160',
                        フォーマッタ:this.formatTime
                    },
                    {
                        ラベル: 'データ更新時間'、
                        プロパティ: 'dqyjsj',
                        ソート可能:true、
                        配置: '中央',
                        幅:'160',
                        フォーマッタ:this.formatTime
                    },
                    {
                        ラベル: '警告の説明'、
                        プロパティ: 'yjgz',
                        配置: '中央',
                        幅:'170',
                    },
                    {
                        ラベル: 'デバイスタイプ'、
                        プロパティ: 'sblx',
                        ソート可能:true、
                        配置: '中央',
                        幅:'140',
                    },
                    {
                        ラベル: '電圧レベル'、
                        プロップ: 'dydjid',
                        ソート可能:true、
                        配置: '中央',
                        幅:'120',
                        フォーマッタ:this.formatVoltageLevel
                    }
                ]、
                警告ResTable_Data_SS:[
                    {dsmc:'dsmc1',sbmc:'sbmc1',dydjid:'hhhhh1'},
                    {dsmc:'dsmc2',sbmc:'sbmc2',dydjid:'hhhhh2'},
                    {dsmc:'dsmc3',sbmc:'sbmc3',dydjid:'hhhhh3'}
                ]、
            }
        },
        メソッド: {
            ハンドル名ソート() {
                console.log('ハンドル名ソート')
            },
            formatVoltageLevel: 関数 (行、列) {
                val = row[column.property]とします。
                (値が未定義の場合){
                    戻る "";
                }
                コンソールログ('val')
                '5555'を返す
 
            },
            changeTableSortSS(列){
                console.log('sortHandle列',列)
            },
            formatTime: 関数 (行、列) {
 
                date = row[column.property]とします。
                日付 == 未定義の場合 {
                    戻る "";
                }
                date?moment(new Date(date)).format('YYYY-MM-DD HH:MM:SS'):'';を返します。
            },
            formatVoltageLevel: 関数 (行、列) {
                val = row[column.property]とします。
                (値が未定義の場合){
                    戻る "";
                }
                val+'kV'を返す
            },
        },
        コンポーネント:
            wテーブル
        }
    }
</スクリプト>

これで、Vue Element Sortablejs でテーブル列をドラッグ アンド ドロップする場合の詳細な説明は終了です。Vue Element Sortablejs でテーブル列のドラッグ アンド ドロップを実装する方法に関するより関連性の高いコンテンツについては、123WORDPRESS.COM の以前の記事を検索するか、次の関連記事を引き続き参照してください。今後とも 123WORDPRESS.COM をよろしくお願いいたします。

以下もご興味があるかもしれません:
  • Vue ドラッグ可能なコンポーネントを使用して、Vue プロジェクトでテーブル コンテンツのドラッグ アンド ドロップによる並べ替えを実装します。
  • vue.draggableはテーブルのドラッグアンドドロップソート効果を実現します
  • Vue ベースのドラッグ可能なツリーテーブルの例の詳細な説明
  • Elementui テーブル コンポーネント + sortablejs を使用して行のドラッグ アンド ドロップによる並べ替えを実装するサンプル コード
  • JS コンポーネント Bootstrap Table テーブル複数行ドラッグ効果実装コード
  • JS コンポーネント Bootstrap Table テーブル行ドラッグ効果実装コード
  • テーブルの並べ替え、編集、ドラッグ、ズームを実装するJavaScript
  • js テーブルの並べ替え (編集 + ドラッグ + ズーム)
  • js テーブル ドラッグ効果のサンプル コード (IE のみ)
  • vue+element-ui+sortable.js はテーブルドラッグ機能を実現します

<<:  MySQL Installer 8.0.21 インストール チュートリアル (画像とテキスト付き)

>>:  nginx の default_server 定義とマッチングルールの詳細な説明

推薦する

開発にVscodeとdockerを組み合わせて使用​​する詳細なプロセス

序文Docker と VS Code を使用すると、ローカル開発環境全体を最適化し、プロジェクトの進...

MySQLクエリ書き換えプラグインの使用

クエリ書き換えプラグインMySQL 5.7.6 以降、MySQL Server は、サーバーが実行す...

一般的なSQL削除ステートメントの原則の違いを理解するだけです

この記事では主に、SQL 削除ステートメント DROP、TRUNCATE、および DELETE の違...

LinuxにDockerをインストールする(非常に簡単なインストール方法)

最近、かなり暇です。大学4年生として数か月間インターンをしていました。インターンとして、Docker...

HTMLの基礎を詳しく解説(第2部)

1. リストリスト ulコンテナーには、一貫した構造とスタイルを持つテキストまたはグラフの形式が読...

vue フロントエンド HbuliderEslint リアルタイム検証 自動修復設定

目次HBuilderX での ESLint プラグインのインストールカスタム eslint-js ル...

Linux で MySQL パスワードを忘れた場合の解決策

問題は次のとおりです。mysql -uroot -p コマンドを入力しましたが、パスワードを忘れてし...

Apache ソースコードのインストールと仮想ホストの設定に関する詳細なチュートリアル

ソースからApacheをインストールする1. Apacheソースコードをアップロードして必要なソフト...

MySQL INT型の完全な分析

序文: Integer は MySQL で最もよく使用されるフィールド型の 1 つで、通常は整数を格...

Nginx におけるサーバーとロケーションのマッチングロジックの詳細な理解

サーバーマッチングロジックNginx は、リクエストを実行するサーバー ブロックを決定するときに、サ...

Navicat は CSV データを MySQL にインポートします

この記事では、Navicatを使用してcsvデータをmysqlにインポートする方法を参考までに紹介し...

ネイティブ Js で実装されたシンプルなシームレス スクロール カルーセルのサンプル コード

シンプルなシームレススクロールカルーセルには多くの抜け穴があり、後から画像を追加するのは非常に不便で...

Docker MQTT のインストールと使用のチュートリアル

MQTT の紹介MQTT (Message Queuing Telemetry Transport)...

Linux コマンドライン操作 Baidu クラウドのファイルのアップロードとダウンロード

目次0. 背景1. インストール2. Baidu Cloudアカウントにログインする3. ファイルを...

node.js でマルチコア CPU を最大限に活用する方法

目次概要node.js でマルチコア CPU を最大限に活用する方法Node で子プロセスを作成する...