Detaillierte Erklärung zum Ziehen von Tabellenspalten mit Vue Element Sortablejs

@Zeichensatz "UTF-8";
 
.w-Tabelle{
  Höhe: 100%;
  Breite: 100 %;
  schweben: links;
}
/* Mausanzeigestil beim Ziehen*/
.w-table_moving .el-table th .thead-cell{
  Cursor: bewegen !wichtig;
}
.w-table_moving .el-table__fixed{
  Cursor: nicht erlaubt;
}
.w-Tabelle .thead-Zelle{
  Anzeige: Inline-Flex;
  Flex-Richtung: Spalte;
  Elemente ausrichten: zentrieren;
  Breite: automatisch;
  maximale Höhe: 23px;
  vertikale Ausrichtung: Mitte;
  Überlauf: anfänglich;
  Position: relativ;
}

<Vorlage>
    <div Klasse="w-table" :Klasse="{'w-table_moving': dragState.dragging}">
        <el-table :data="Daten"
                  :ref="Option.ref"
                  :Klasse="Option.Klasse"
                  :stripe="Option.stripe"
                  :border="Option.border"
                  :Höhe="Option.Höhe"
                  :max-height="Option.maxHöhe"
                  Aktuelle Zeile hervorheben
                  :style="{ width: parseInt(option.width)+'px' }" :cell-class-name="Zellenklassenname"
                  :header-cell-class-name="Headerzellenklassenname"
                  @sort-change="Option.sortChange"
        >
            <slot name="fest"></slot>
 
            <template v-for="(Spalte, Index) im Tabellenkopf">
                <el-table-column :label="col.label" :key="index" :prop="col.prop" :width="col.width" v-if="col.useTemplate==true">
                    <template slot-scope="Umfang">
                        <span v-html=col.useTemplateRes(scope.row)></span>
                    </Vorlage>
                </el-Tabellenspalte>
                <el-table-column v-else
                                 :Schlüssel="Index"
                                 :prop="Spalte.prop"
                                 :label="Spalte.label"
                                 :Breite="Spaltenbreite"
                                 :min-width="Spalte.minWidth"
                                 :Typ="Spalte.Typ"
                                 :sortierbar="Spalte.sortierbar"
                                 :header-align="Spalte.headerAlign"
                                 :align="Spalte.align"
                                 :Spaltenschlüssel="index.toString()"
                                 :render-header="RenderHeader"
                                 Überlauf-Tooltip anzeigen
                                 :formatter="Spalte.formatter"
                >
                </el-Tabellenspalte>
                <el-table-column :label="v.name" :key="k" :prop="v.prop" :width="v.width" v-else></el-table-column>
            </Vorlage>
 
 
            <!--<el-table-column v-for="(col, index) in tableHeader" :key="index"
                             :prop="Spalte.prop"
                             :label="Spalte.label"
                             :Breite="Spaltenbreite"
                             :min-width="Spalte.minWidth"
                             :Typ="Spalte.Typ"
                             :sortierbar="Spalte.sortierbar"
                             :header-align="Spalte.headerAlign"
                             :align="Spalte.align"
                             :Spaltenschlüssel="index.toString()"
                             :render-header="RenderHeader"
                             Überlauf-Tooltip anzeigen
                             :formatter="Spalte.formatter"
            >
            </el-table-column>-->
        </el-Tabelle>
    </div>
</Vorlage>
 
<Skript>
    Sortable aus „sortablejs“ importieren
    Standard exportieren {
        Name: "",
        Daten () {
            zurückkehren {
                tableHeader: dieser.header,
                Ziehen Sie den Status: {
                    start: -9, // Index des Startelements
                    end: -9, // Index des Elements, das beim Bewegen der Maus abgedeckt wird
                    dragging: false, // Ist es dragging direction: undefined // Dragging direction }
            }
        },
        Requisiten: {
            Daten: {
                Standard: Funktion () {
                    zurückkehren []
                },
                Typ: Array
            },
            Kopfzeile: {
                Standard: Funktion () {
                    zurückkehren []
                },
                Typ: Array
            },
            Option: {
                Standard: Funktion () {
                    zurückkehren {}
                },
                Typ: Objekt
            }
        },
        montiert() {
 
        },
        betrachten:
            Header (Wert, alterWert) {
                this.tableHeader = Wert
            }
        },
        Methoden: {
 
            renderHeader (ErstellenElement, {Spalte}) {
                returniere Element erstellen(
                    'div', {
                        'Klasse': ['Kopfzelle'],
                        An: {
                            Maus nach unten: ($event) => { this.handleMouseDown($event, Spalte) },
                            Mausbewegung: ($event) => { this.handleMouseMove($event, column) }
                        }
                    }, [
                        // Fügen Sie <a> hinzu, um die Kopfzeilenbezeichnung anzuzeigen
                        createElement('span', spaltenbezeichnung),
                        // Füge ein leeres Tag hinzu, um die Drag-Animation anzuzeigen createElement('span', {
                            'Klasse': ['virtuell']
                        })
                    ])
            },
            // Drücken Sie die Maus, um mit dem Ziehen zu beginnen handleMouseDown (e, column) {
                this.dragState.dragging = wahr
                this.dragState.start = parseInt(Spalte.Spaltenschlüssel)
                // Breite und Höhe beim Ziehen zum virtuellen Container hinzufügen let table = document.getElementsByClassName('w-table')[0]
                let virtual = document.getElementsByClassName('virtual')
                für (let item of virtual) {
                    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);
            },
 
            // Lassen Sie die Maus los, um den Drag-Vorgang zu beenden handleMouseUp () {
                diese.dragColumn(diese.dragState)
                // Drag-Status initialisieren this.dragState = {
                    Beginn: -9,
                    Ende: -9,
                    ziehen: falsch,
                    Richtung: undefiniert
                }
                : document.removeEventListener('mouseup', this.handleMouseUp);
            },
 
            //Ziehen Sie den Griff der Maus. Verschieben Sie (e, Spalte) {
                wenn (dieser.dragState.dragging) {
                    let index = parseInt(column.columnKey) // Startspalte aufzeichnen if (index - this.dragState.start !== 0) {
                        this.dragState.direction = index - this.dragState.start < 0 ? 'left' : 'right' // Bestimmen Sie die Ziehrichtung this.dragState.end = parseInt(column.columnKey)
                    } anders {
                        this.dragState.direction = nicht definiert
                    }
                } anders {
                    return false
                }
            },
 
            // Ziehen und neu positionieren dragColumn ({start, end, direction}) {
                let tempData = []
                lass links = Richtung === 'links'
                sei min = links? Ende : Start - 1
                sei max = links? Start + 1 : Ende
                für (lass i = 0; i < this.tableHeader.length; i++) {
                    wenn (i === Ende) {
                        tempData.push(dieser.tableHeader[start])
                    } sonst wenn (i > min und i < max) {
                        tempData.push(diese.tableHeader[links?i-1:i+1])
                    } anders {
                        tempData.push(dieser.tableHeader[i])
                    }
                }
                this.tableHeader = tempData
            },
            headerCellClassName ({Spalte, Spaltenindex}) {
                let active = Spaltenindex - 1 === this.dragState.end ? `darg_active_${this.dragState.direction}` : ''
                let start = Spaltenindex - 1 === this.dragState.start ? `darg_start` : ''
                gibt `${active} ${start}` zurück
            },
 
            Zellklassenname ({Spalte, Spaltenindex}) {
                Rückgabe (Spaltenindex – 1 === this.dragState.start? „darg_start“: „“)
            },
 
 
 
 
 
 
 
        },
    }
</Skript>
 
<Stil>
    @import '~@/assets/css/dragTable.css';
 
 
 
</Stil>

<Vorlage>
    <div>
        <wTable :data="WarnResTable_Data_SS" :header="tableHeaderSS" :option="tableOptionSS">
            <el-table-column
                    Typ="Index"
                    Slot="fest"
                    behoben
                    prop=""
                    label="Seriennummer"
                    ausrichten="zentrieren"
                    Breite="60"
            >
            </el-Tabellenspalte>
            <el-table-column
                    Bezeichnung = "Vorgang"
                    Slot="fest"
                    behoben
                    prop=""
                    Breite="95"
                    ausrichten="zentrieren">
                <template slot-scope="Umfang">
                    <el-Schaltfläche
                            Größe="mini"
                            @click="lookDetails(scope.$index, scope.row)">Anzeigen</el-button>
                </Vorlage>
            </el-Tabellenspalte>
        </wTabelle>
    </div>
</Vorlage>
 
<Skript>
    importiere wTable aus '../../components/dragTable/dragTable'
    Standard exportieren {
        Name: "Tabelle",
        Daten () {
            zurückkehren {
                TabellenoptionSS: {
                    Grenze: wahr,
                    Streifen: wahr,
                    ref:'WarnResSSTable',
                    Klasse: 'pms-Tabelle',
                    maxHeight: "100%",
                    Höhe: "100%",
                    sortChange:this.changeTableSortSS
                },
                TabellenkopfzeileSS: [
                    {
                        Bezeichnung: 'Stadtname',
                        Stütze: "dsmc",
                        sortierbar: wahr,
                        ausrichten: 'zentriert',
                        Breite: '200',
                    },
                    {
                        Bezeichnung: 'Betriebs- und Wartungseinheit',
                        Stütze: "ywdw",
                        ausrichten: 'zentriert',
                        Breite: '200',
                    },
                    {
                        Bezeichnung: 'Unterstation',
                        Stütze: "bdzmc",
                        ausrichten: 'zentriert',
                        Breite: '170',
                    },
                    {
                        Bezeichnung: 'Gerätename',
                        Stütze: "sbmc",
                        sortierbar: wahr,
                        ausrichten: 'zentriert',
                        Breite: '150',
                    },
                    {
                        Bezeichnung: 'Warnparameter',
                        Stütze: "yjcs",
                        ausrichten: 'zentriert',
                        Breite: '150',
                    },
                    {
                        Bezeichnung: „Warnungstyp“,
                        Stütze: "yjlx",
                        ausrichten: 'zentriert',
                        Breite: '140',
                    },
                    {
                        Beschriftung: 'Erster Warnzeitpunkt',
                        Stütze: 'scyjsj',
                        sortierbar:true,
                        ausrichten: 'zentriert',
                        Breite: '160',
                        Formatierer:dieses.formatTime
                    },
                    {
                        Bezeichnung: „Datenzeit aktualisieren“,
                        Stütze: "dqyjsj",
                        sortierbar:true,
                        ausrichten: 'zentriert',
                        Breite: '160',
                        Formatierer:dieses.formatTime
                    },
                    {
                        Bezeichnung: 'Warnungsbeschreibung',
                        Stütze: "yjgz",
                        ausrichten: 'zentriert',
                        Breite: '170',
                    },
                    {
                        Bezeichnung: „Gerätetyp“,
                        Stütze: "sblx",
                        sortierbar:true,
                        ausrichten: 'zentriert',
                        Breite: '140',
                    },
                    {
                        Bezeichnung: 'Spannungspegel',
                        Stütze: 'dydjid',
                        sortierbar:true,
                        ausrichten: 'zentriert',
                        Breite: '120',
                        Formatierer:dieses.formatVoltageLevel
                    }
                ],
                WarnResTable_Data_SS:[
                    {dsmc:'dsmc1',sbmc:'sbmc1',dydjid:'hhhhh1'},
                    {dsmc:'dsmc2',sbmc:'sbmc2',dydjid:'hhhhh2'},
                    {dsmc:'dsmc3',sbmc:'sbmc3',dydjid:'hhhhh3'}
                ],
            }
        },
        Methoden: {
            handleNameSort() {
                console.log('handleNameSort')
            },
            formatVoltageLevel: Funktion (Zeile, Spalte) {
                let val = Zeile[Spalteneigenschaft];
                wenn (Wert == undefiniert) {
                    zurückkehren "";
                }
                konsole.log('Wert ')
                Rückgabewert '5555'
 
            },
            changeTableSortSS(Spalte){
                console.log('sortHandle-Spalte',Spalte)
            },
            formatTime: Funktion (Zeile, Spalte) {
 
                let date = Zeile[Spalteneigenschaft];
                if (Datum == undefiniert) {
                    zurückkehren "";
                }
                Rückgabedatum? Moment (neues Datum (Datum)). Format ('JJJJ-MM-TT HH:MM:SS'):'';
            },
            formatVoltageLevel: Funktion (Zeile, Spalte) {
                let val = Zeile[Spalteneigenschaft];
                wenn (Wert == undefiniert) {
                    zurückkehren "";
                }
                Rückgabewert+'kV'
            },
        },
        Komponenten:
            wTabelle
        }
    }
</Skript>