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

@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;
  垂直位置合わせ: 中央;
  オーバーフロー: 初期値;
  位置: 相対的;
}

<テンプレート>
    <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';
 
 
 
</スタイル>

<テンプレート>
    <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テーブル
        }
    }
</スクリプト>