Implementierung von verschiebbaren Zeilen und Spalten sowie Auswahlspaltenkomponenten basierend auf der el-table-Kapselung

<HTable
  :columns="Spalten"
  :data="Liste"
  :setColumn="wahr"
  tableKey="Kategorienliste"
  Stil="Breite: 100%"
  Grenze
>
  // Hier können Sie Slots einfügen <template slot="create_time" slot-scope="scope">
    {{ Umfang.Spalte.Label + Umfang.Item.Prop }}
  </Vorlage>
  <template slot="Aktion" slot-scope="Umfang">
    <el-button Typ="primär" @click="handleEdit(scope.row)" Größe="klein">
      Bearbeiten</el-button>
    <el-button @click="handleDelete(scope.row)" Typ="Gefahr" Größe="klein">
      Löschen</el-button>
  </Vorlage>
</HTable>
importiere HTable aus "@/components/HTable";

Standard exportieren {
  Komponenten: { HTable },
  Daten() {
    zurückkehren {
      Liste: [],
      Spalten: [
        {
          Bezeichnung: „ID“, // Beschreibungseigenschaft: „_id“, // Der eindeutige Wert der Spalte. Muss aktiviert sein: true // Ob diese Spalte angezeigt werden soll... // Einige el-table-column-Attribute können hier geschrieben werden},
        {
          Bezeichnung: "Kategoriename",
          Requisite: "Name",
          geprüft: true
        },
        {
          Bezeichnung: „Höhere Kategorie“,
          Eigenschaft: "parent.name",
          geprüft: true
        },
        {
          Bezeichnung: "Status",
          Requisite: "Status",
          Breite: "100",
          geprüft: true
        },
        {
          Beschriftung: „Erstellungszeit“,
          Eigenschaft: "Erstellungszeit",
          slotHeaderName: "create_time", // Benutzerdefinierter Header aktiviert: true
        },
        {
          Bezeichnung: "Operation",
          Requisite: "Aktion",
          fest: "richtig",
          "Mindestbreite": "100",
          slotName: "action", // Benutzerdefinierter Zellenslot aktiviert: true,
          deaktiviert: true
        }
      ]
    };
  }
};

<Vorlage>
  <div Klasse="HTable">
    <div Klasse="Einstellungsfeld" v-if="Spalte festlegen">
      <el-popover
        Platzierung="unten"
        Auslöser="Klick"
        popper-class="EinstellungPopper"
      >
        <el-checkbox-gruppe
          v-Modell="Spalte auswählen"
          @change="Auswahlspalte ändern"
        >
          <el-Kontrollkästchen
            v-for="Element in Spalte"
            :Schlüssel="item.prop"
            :label="Artikel.Eigenschaft"
            :deaktiviert="Element.deaktiviert"
            Stil="Anzeige:Block;Zeilenhöhe:2;Rand rechts:0;"
            >{{ Artikel.Bezeichnung }}</el-checkbox
          >
        </el-checkbox-group>
        <i class="icon el-icon-setting" slot="Referenz"></i>
      </el-popover>
    </div>
    <el-Tabelle
      v-bind="$attrs"
      :data="Tabellendaten"
      v-on="$listeners"
      :Schlüssel="JSON.stringify(checkedCol)"
    >
      <el-table-column
        v-for="(Element, Index) in geprüfter Spalte"
        :Schlüssel="item.prop"
        v-bind="Artikel"
        :index="Index"
        :Spaltenschlüssel="item.prop"
      >
        <template v-if="item.slotHeaderName" v-slot:header="scope">
          <slot :name="Artikel.slotHeaderName" v-bind="Umfang" :Artikel="Artikel"></slot>
        </Vorlage>
        <template v-if="item.slotName" v-slot:default="Bereich">
          <slot :name="item.slotName" v-bind="scope"></slot>
        </Vorlage>
      </el-Tabellenspalte>
    </el-Tabelle>
  </div>
</Vorlage>

<Skript>
importiere Sortable von „sortablejs“;
Standard exportieren {
  Name: "HTable",
  Requisiten: {
    Tabellenschlüssel: Zeichenfolge,
    Spalten: {
      Typ: Array,
      Standard() {
        zurückkehren [];
      }
    },
    Daten: {
      Typ: Array,
      Standard() {
        zurückkehren [];
      }
    },
    Spalte festlegen: {
      Typ: Boolean,
      Standard: false
    }
  },
  betrachten:
    Spalten: {
      handler(neuerWert) {
        let localVal = this.getStorageCol();
        lass hotVal = [];
        wenn (localVal) {
          hotVal = this.dataDiff(neuerWert, lokalerWert);
        } anders {
          heißerWert = [...neuerWert];
        }
        diese.col = hotVal.map(
          (Element, Index) =>
            (Element = { ...Element, Index, aktiviert: Element.aktiviert || false })
        );
        dies.checkedCol = dies.checkedColFun(diese.col);
        Dies.selectCol = dies.checkedCol.map(item => (item = item.prop));
      },
      sofort: wahr
    },
    Daten: {
      handler(neuerWert) {
        this.tableData = [...neuerWert];
      },
      sofort: wahr
    },
    Spalte: {
      handler(neuerWert) {
        this.setStorageCol(neuerWert);
      },
      tief: wahr,
      sofort: wahr
    }
  },
  Daten() {
    zurückkehren {
      Tabellendaten: [],
      Spalte: [],
      geprüfte Spalte: [],
      Spalte auswählen: []
    };
  },

  montiert() {
    document.body.ondrop = Funktion(Ereignis) {
      event.preventDefault();
      event.stopPropagation();
    };
    dies.$nextTick(() => {
      dies.rowDrop();
      diese.columnDrop();
    });
  },
  Methoden: {
    drap() {
      dies.$nextTick(() => {
        dies.rowDrop();
        diese.columnDrop();
      });
    },

    handleÄndernAuswahlSpalte() {
      diese.col.forEach(item => {
        wenn (this.selectCol.includes(item.prop)) {
          Element.geprüft = wahr;
        } anders {
          Element.geprüft = falsch;
        }
      });
      dies.checkedCol = dies.checkedColFun(diese.col);
      dies.drap();
    },

    ZeileDrop() {
      const tbody = document.querySelector(".el-table__body-wrapper tbody");
      Sortable.create(tbody, {
        am Ende: ({ neuerIndex, alterIndex }) => {
          [diese.tableData[neuerIndex], diese.tableData[alterIndex]] = [
            this.tableData[alterIndex],
            diese.tableData[neuerIndex]
          ];
          dies.drap();
          dies.$emit("dropRow", {
            drapRow: this.tableData[alterIndex],
            Zielzeile: this.tableData[neuerIndex],
            drapRowIndex: alterIndex,
            targetRowIndex: neuerIndex,
            Daten: this.tableData
          });
        }
      });
    },
    SpalteDrop() {
      const wrapperTr = document.querySelector(".el-table__header-wrapper tr");
      Sortable.create(wrapperTr, {
        Animation: 180,
        Verzögerung: 0,
        am Ende: ({ neuerIndex, alterIndex }) => {
          const oldItem = this.checkedCol[alterIndex];
          const newItem = this.checkedCol[neuerIndex];
          [diese.col[neuesElement.index].index, diese.col[altesElement.index].index] = [
            alterArtikel.index,
            neuesElement.index
          ];
          diese.col.sort((a, b) => {
            gibt a.index - b.index zurück;
          });
          dies.checkedCol = dies.checkedColFun(diese.col);
          diese.tableData = diese.tableData.slice(0, diese.tableData.length);
          dies.drap();
          dies.$emit("dropCol", {
            colItem: altesItem,
            neuerIndex: neuerIndex,
            alterIndex: alterIndex,
            Spalte: this.checkedCol
          });
        }
      });
    },
    geprüftColFun(arr) {
      gibt arr.filter zurück (Element => Element.geprüft);
    },
    setStorageCol(Daten) {
      wenn (dieser.Tabellenschlüssel && Daten && Datenlänge > 0) {
        localStorage.setItem("HTable-" + this.tableKey, JSON.stringify(data));
      }
    },
    getStorageCol() {
      let datajson = localStorage.getItem("HTable-" + this.tableKey);
      datajson zurückgeben? JSON.parse(datajson) : "";
    },
    Datendifferenz(neuerWert, lokalerWert) {
      sei nl = neuerWert.Länge;
      sei ll = localVal.length;
      wenn (nl != ll) {
        gibt neuen Wert zurück;
      } anders {
        Lassen Sie np = newVal.map(item => item.prop).sort();
        let lp = localVal.map(item => item.prop).sort();
        wenn (np.join() != lp.join()) {
          gibt neuen Wert zurück;
        } anders {
          sei nnl = [];
          für (lass i = 0; i < localVal.length; i++) {
            const item_l = localVal[i];
            für (let j = 0; j < newVal.length; j++) {
              const item_n = neuerWert[j];
              wenn (item_l.prop === item_n.prop) {
                nnl.push({
                  ...Artikel_n,
                  Index: item_l.index
                });
              }
            }
          }
          Rückgabe nnl;
        }
      }
    }
  }
};
</Skript>

<style lang="less" scoped>
.HTable {
  Position: relativ;
  .EinstellungsBox {
    Breite: 36px;
    Höhe: 36px;
    Rahmenradius: 2px;
    Rand: 1px durchgezogen #ebeef5;
    Rahmen unten: 0;
    Rand links: automatisch;
    Position: relativ;
    .Symbol {
      Position: absolut;
      oben: 0;
      links: 0;
      Z-Index: 1;
      Breite: 36px;
      Höhe: 36px;
      Textausrichtung: zentriert;
      Schriftgröße: 20px;
      Zeilenhöhe: 36px;
      Farbe: #909399;
      Cursor: Zeiger;
    }
  }
}
</Stil>
<style lang="less">
.EinstellungPopper {
  Mindestbreite: 100px !wichtig;
}
</Stil>