Implementierungsprozessdatensatz für benutzerdefinierte Vue-Tabellenspalten

npm installiere vuedraggable -S

<Vorlage>
  <div>
    <el-dialog title="Benutzerdefinierte Anzeigespalte" :visible.sync="dialogVisible" width="50%">
      <div Klasse="Menüs auswählen" Menüs-Box">
        <p class="menus-title">Ziehen Sie die Blöcke, um die Anzeigereihenfolge anzupassen</p>
        <div Klasse="Menüinhalte">
          <draggable v-model="ausgewählt" @update="datadragEnd" :options="{animation:500}">
            <Übergangsgruppe>
              <div v-for="Menü im ausgewählten" :key="Menü.Feld" class="Drag-Item-Element">{{Menü.Name}}</div>
            </Übergangsgruppe>
          </ziehbar>
        </div>
      </div>
      <div Klasse="Menüs-Container Menüs-Box" v-if="Felder.Länge">
        <p class="menus-title">Anzeigespalten auswählen</p>
        <div Klasse="Menüinhalte">
          <div
            Klasse="Artikel"
            :Klasse="{active:menu.active}"
            v-for="Menü der Felder"
            :Schlüssel="Menü.Feld"
            @click="beiAuswahl(Menü)"
          >{{menu.name}}</div>
        </div>
      </div>
      <span slot="Fußzeile" class="dialog-footer">
        <el-button @click="dialogVisible = false">Abbrechen</el-button>
        <el-button type="primary" @click="onSave">OK</el-button>
      </span>
    </el-dialog>
  </div>
</Vorlage>
<Skript>
importiere ziehbares Objekt aus „vuedraggable“;
importiere { getFields, setFields, getFieldControl } von "@/api/user";
Standard exportieren {
  Name: "setTable",
  injizieren: ["neu laden"],
  Requisiten: {
    Typen: String,
  },
  Komponenten:
    ziehbar,
  },
  Daten() {
    zurückkehren {
      dialogVisible: false,
      Felder: [], //Alle Menüs ausgewählt: [], //Ausgewähltes Menü};
  },
  betrachten:
    ausgewählt: {
      handler(alterWert, neuerWert) {
        wenn (diese.Felder.Länge === 0) {
          zurückkehren;
        }
        neuerWert.map((i) => {
          diese.fields.map((j) => {
            wenn (i.Feld === j.Feld) {
              // Wenn das gleiche Feld bereits im ausgewählten Array vorhanden ist, ist „active“ wahr. „Active“ wird hauptsächlich verwendet, um den ausgewählten/nicht ausgewählten Stil aller Menüs zu steuern. j.active = true;
            }
          });
        });
      },
    },
  },
  montiert() {
    //Um zu verhindern, dass Firefox beim Ziehen eine neue Registerkarte öffnet document.body.ondrop = function (event) {
      event.preventDefault();
      event.stopPropagation();
    };
  },
  Methoden: {
    asynchron getData() {
      // Alle Menüdaten abrufen const { data: fields } = await getFields({
        Typen: diese.Typen,
      });
      Felder.map((item) => {
        // Da der Server das aktive Feld nicht zurückgibt, muss jedem Datenelement ein aktives Feld hinzugefügt werden, um den ausgewählten Stil zu steuern. item.active = false;
      });
      diese.felder = Felder;
    },
    async getFields() {
      // Das vom Benutzer ausgewählte Menü abrufen, damit beim erneuten Öffnen der Einstellungen das zuletzt ausgewählte Menü auf der Seite angezeigt werden kann, damit der Benutzer es erneut ändern kann. let fields = await getFieldControl({
        Konto-ID: diese.$store.state.user.token.account_id,
        Benutzer-ID: this.$store.state.user.token.userid,
        Typen: diese.Typen,
      });
      dies.$nextTick(() => {
        this.selected.push(...Felder.Daten);
      });
    },
    async beiSpeichern() {
      // Ausgewähltes Menü speichern await setFields({
        Konto-ID: diese.$store.state.user.token.account_id,
        Benutzer-ID: this.$store.state.user.token.userid,
        Typen: diese.Typen,
        Inhalt: this.selected,
      });
      this.reload(); //Seite aktualisieren},
    asynchron öffnen() {
      // Beim Öffnen des Einstellungsfensters die Daten löschen und die aktuellsten Daten erneut anfordern this.fields = [];
      dies.ausgewählt = [];
      this.dialogVisible = true;
      warte auf dies.getData();
      warte auf this.getFields();
    },
    beiAuswahl(Element) {
      // Bestimmen Sie, ob im ausgewählten Menü ein ausgewähltes Menü vorhanden ist. let findex = this.selected.findIndex((i) => {
        Rückgabewert: Element.Feld === i.Feld;
      });
      wenn (findex === -1) {
        // Wenn im Menü kein ausgewähltes Element vorhanden ist, fügen Sie es dem letzten Element hinzu. this.selected.push(item);
      } anders {
        // Wenn es bereits ausgewählt ist, sollte es beim Anklicken entfernt werden und „active“ sollte auf „false“ gesetzt werden, um den ausgewählten Stil zu ändern. item.active = false;
        dies.ausgewählt.splice(findex, 1);
      }
    },
    datadragEnd(evt) {
      // Dragsort evt.preventDefault();
    },
  },
};
</Skript>
<style lang="scss" scoped>
/* Alle Menüs */
.menus-container {
  Rand oben: 20px;
  .menus-content {
    .Artikel {
      Farbe: #575757;
      Hintergrund: rgba(238, 238, 238, 1);
      Rand: 1px durchgezogen rgba(220, 220, 220, 1);
      Rahmenradius: 2px 0px 0px 2px;
    }
  }
}
/* Allgemeiner Menüstil*/
.Menüs-Box {
  .Menütitel {
    Rand oben: 10px;
    Zeilenhöhe: 32px;
  }
  .menus-content {
    Anzeige: Flex;
    Flex-Wrap: Umwickeln;
    .Artikel {
      Cursor: Zeiger;
      Anzeige: Inline-Flex;
      Elemente ausrichten: zentrieren;
      Inhalt ausrichten: zentriert;
      Polsterung: 8px;
      Rand: 10px;
      Rahmenradius: 3px;
    }
    .aktiv {
      Farbe: #fff;
      Hintergrund: rgba(72, 153, 229, 1);
      Rahmenradius: 2px 0px 0px 2px;
    }
  }
}

/* Ausgewähltes Menü */
.Menüs auswählen {
  .menus-content {
    .Artikel {
      Rand: 0px;
      Randradius: 0;
      Hintergrund: rgba(255, 255, 255, 1);
      Rand: 1px durchgezogen rgba(220, 220, 220, 1);
    }
  }
}
</Stil>

<Vorlage>
  <div>
    <el-Tabelle
      ref="mehrereTabelle"
      :data="Tabellendaten"
      Höhe="60vh"
      :row-class-name="Tabellenzeilenklassenname"
      @selection-change="Auswahländerungsgriff"
      @row-click="Lesen"
    >
      <el-table-column Typ="Auswahl" min-width="55px;"></el-table-column>
      <template v-for="(Element,Index) von Feldern">
        <el-table-column
          v-if="Artikel.Feld==='Name'"
          :Schlüssel="Index"
          :prop="Artikel.Feld"
          :label="Artikelname"
          Mindestbreite = "10 %;"
          Überlauf-Tooltip anzeigen
        ></el-table-column>
        <el-table-column
          v-if="item.field==='Geschlecht'"
          :Schlüssel="Index"
          :prop="Artikel.Feld"
          :label="Artikelname"
          Mindestbreite = "8 %;"
          Überlauf-Tooltip anzeigen
        >
          <template slot-scope="scope">{{scope.row.gender===1?'男':'女'}}</template>
        </el-Tabellenspalte>
        <el-table-column
          v-if="item.field==='corp_full_name'"
          :Schlüssel="Index"
          :prop="Artikel.Feld"
          :label="Artikelname"
          Mindestbreite = "14 %;"
          Überlauf-Tooltip anzeigen
        ></el-table-column>
        <el-table-column
          v-if="Artikel.Feld==='Firmenname'"
          :Schlüssel="Index"
          :prop="Artikel.Feld"
          :label="Artikelname"
          Mindestbreite = "12 %;"
          Überlauf-Tooltip anzeigen
        ></el-table-column>
        <el-table-column
          v-if="Artikel.Feld==='up_date'"
          :Schlüssel="Index"
          :prop="Artikel.Feld"
          :label="Artikelname"
          Mindestbreite = "14 %;"
          Überlauf-Tooltip anzeigen
        ></el-table-column>
        <el-table-column
          v-if="Artikel.Feld==='Position'"
          :Schlüssel="Index"
          :prop="Artikel.Feld"
          :label="Artikelname"
          Mindestbreite = "10 %;"
          Überlauf-Tooltip anzeigen
        ></el-table-column>
        <el-table-column
          v-if="item.field==='remark_mobiles'"
          :Schlüssel="Index"
          :prop="Artikel.Feld"
          :label="Artikelname"
          Mindestbreite = "14 %;"
          Überlauf-Tooltip anzeigen
        ></el-table-column>
        <el-table-column
          v-if="item.field==='Quellenname'"
          :Schlüssel="Index"
          :prop="Artikel.Feld"
          :label="Artikelname"
          Mindestbreite = "10 %;"
          Überlauf-Tooltip anzeigen
        ></el-table-column>
        <el-table-column
          v-if="item.field==='Adresse'"
          :Schlüssel="Index"
          :prop="Artikel.Feld"
          :label="Artikelname"
          Mindestbreite = "10 %;"
          Überlauf-Tooltip anzeigen
        ></el-table-column>
        <el-table-column
          v-if="item.field==='detail_address'"
          :Schlüssel="Index"
          :prop="Artikel.Feld"
          :label="Artikelname"
          Mindestbreite = "10 %;"
          Überlauf-Tooltip anzeigen
        ></el-table-column>
        <el-table-column
          v-if="Artikel.Feld==='Beschreibung'"
          :Schlüssel="Index"
          :prop="Artikel.Feld"
          :label="Artikelname"
          Mindestbreite = "10 %;"
          Überlauf-Tooltip anzeigen
        ></el-table-column>
        <el-table-column
          v-if="item.field==='Bemerkung'"
          :Schlüssel="Index"
          :prop="Artikel.Feld"
          :label="Artikelname"
          Mindestbreite = "10 %;"
          Überlauf-Tooltip anzeigen
        ></el-table-column>
        <el-table-column
          v-if="item.field==='Datensatzinhalt'"
          :Schlüssel="Index"
          :prop="Artikel.Feld"
          :label="Artikelname"
          Mindestbreite = "14 %;"
          Überlauf-Tooltip anzeigen
        ></el-table-column>
        <el-table-column
          v-if="item.field==='eigentümername'"
          :Schlüssel="Index"
          :prop="Artikel.Feld"
          :label="Artikelname"
          Mindestbreite = "10 %;"
          Überlauf-Tooltip anzeigen
        ></el-table-column>
        <el-table-column
          v-if="item.field==='follow_time'"
          :Schlüssel="Index"
          :prop="Artikel.Feld"
          :label="Artikelname"
          Mindestbreite = "8 %;"
          Überlauf-Tooltip anzeigen
        >
          <template slot-scope="Umfang">
            <div v-if="scope.row.follow_time===scope.row.createtime">Keine</div>
            <div v-else>{{scope.row.follow_time | formatDate}}</div>
          </Vorlage>
        </el-Tabellenspalte>
        <el-table-column
          v-if="item.field==='nächste_Folgezeit'"
          :Schlüssel="Index"
          :prop="Artikel.Feld"
          :label="Artikelname"
          Mindestbreite = "8 %;"
          Überlauf-Tooltip anzeigen
        >
          <template slot-scope="Umfang">
            <div v-if="scope.row.next_follow_time===0">Keine</div>
            <div v-else>{{scope.row.next_follow_time | formatDate}}</div>
          </Vorlage>
        </el-Tabellenspalte>
        <el-table-column
          v-if="item.field==='Erstellungszeit'"
          :Schlüssel="Index"
          :prop="Artikel.Feld"
          :label="Artikelname"
          Mindestbreite = "8 %;"
          Überlauf-Tooltip anzeigen
        >
          <template slot-scope="Umfang">
            <div>{{scope.row.createtime | formatDate}}</div>
          </Vorlage>
        </el-Tabellenspalte>
        <el-table-column
          v-if="item.field==='updatetime'"
          :Schlüssel="Index"
          :prop="Artikel.Feld"
          :label="Artikelname"
          Mindestbreite = "8 %;"
          Überlauf-Tooltip anzeigen
        >
          <template slot-scope="Umfang">
            <div>{{scope.row.updatetime | formatDate}}</div>
          </Vorlage>
        </el-Tabellenspalte>
        <el-table-column
          v-if="item.field==='ist_Datensatz'"
          :Schlüssel="Index"
          :prop="Artikel.Feld"
          :label="Artikelname"
          Mindestbreite = "10 %;"
          Überlauf-Tooltip anzeigen
        >
          <template slot-scope="Umfang">
            <div>{{scope.row.is_record === 0 ? 'Nicht weiterverfolgt' : 'Bereits weiterverfolgt' }}</div>
          </Vorlage>
        </el-Tabellenspalte>
        <el-table-column
          v-if="Artikel.Feld==='if_Datensatz'"
          :Schlüssel="Index"
          :prop="Artikel.Feld"
          :label="Artikelname"
          Mindestbreite = "10 %;"
          Überlauf-Tooltip anzeigen
        ></el-table-column>
      </Vorlage>
      <el-table-column label="Vorgang" min-width="8%;">
        <template slot-scope="Umfang">
          <el-button @click="handleRead(scope.row)" type="text">Details</el-button>
        </Vorlage>
      </el-Tabellenspalte>
      <el-table-column align="right" min-width="4%;">
        <template slot="header">
          <i class="iconfont icongengduo" @click="onMore"></i>
        </Vorlage>
      </el-Tabellenspalte>
    </el-Tabelle>
    <set-table ref="Einstellung" types="leads"></set-table>
  </div>
</Vorlage>

<Skript>
importiere setTable aus "@/components/setTable";
importiere { getFieldControl } von "@/api/user";
Standard exportieren {
  Name: "Hinweise",
  Komponenten:
    Tabelle festlegen,
  },
  Daten() {
    zurückkehren {
      Felder: [],
    };
  },
  asynchron gemountet() {
    warte auf this.getFields();
    diese.Hinweise();
  },
  Methoden: {
    async getFields() {
      let fields = warte auf getFieldControl({
        Konto-ID: diese.$store.state.user.token.account_id,
        Benutzer-ID: this.$store.state.user.token.userid,
        Typen: „Leads“,
      });
      diese.Felder = Felder.Daten;
    },
    aufMehr() {
      dies.$refs.setting.open();
    },
  },
};
</Skript>