Detaillierte Erläuterung der Schritte zur Verwendung von ElementUI in tatsächlichen Projekten

<!-- 1. Definieren Sie den Feldnamen, nach dem sortiert werden soll-->
 
<el-table :data="Liste" border :default-sort="{prop: 'workNumber'}">
</el-Tabelle>
 
<!-- 2. Stellen Sie sicher, dass das Prop-Attribut und das Sortable-Attribut in der Feldspalte deklariert sind -->
 
<el-table-column label="Job-Eintrittszeit" sortable prop="timeOfEntry">
</el-Tabellenspalte>

Daten() {
  zurückkehren {
    //Andere Summe weglassen: 0,
    Seite: 1, // aktuelle Seitenzahl Größe: 5, // Anzahl der Datensätze pro Seite Gesamt: 0 // Gesamtzahl der Datensätze }
}

<div Stil="Höhe: 60px; oberer Rand: 10px">
<!-- Seitennummerierung -->
        <el-pagination
          Layout = "Gesamt, Größen, vorherige, Pager, nächste, Jumper"
          :gesamt="gesamt"
          :page-size="Größe"
          :Seitengrößen="[2,5,10]"
          @current-change="hAktuelleÄnderung"
          @size-change="hGrößenänderung"
        />
</div>

// Erhält automatisch die aktuell angeklickte Seitennummer hCurrentChange(curPage) {
      // Alarm (aktuelle Seite)
      // 1. Aktualisiere die Seitennummer this.page = curPage
      // 2. Anfrage erneut senden this.loadEmployee()
    },
    // Wie viele Elemente pro Seite hSizeChange(curSize) {
      // Alarm (Größe)
      // 1. Aktualisiere die Anzahl der Einträge pro Seite this.size = curSize
      // 2. Anfrage erneut senden this.loadEmployee()
    },

<el-checkbox-group v-model="Rollen-IDs">
  <el-checkbox label="110">Administrator</el-checkbox>
  <el-checkbox label="113">Entwickler</el-checkbox>
  <el-checkbox label="115">Personal</el-checkbox>
</el-checkbox-group>

Daten () {
  zurückkehren {
    roleIds: [] // Aktuell ausgewählte Berechtigungsliste speichern}
}

<el-card Klasse="Box-Karte">
  <div Slot="Header" Klasse="Header">
    <span>Arbeitskalender</span>
  </div>
  <!-- Platzieren Sie die Kalenderkomponente-->
  <Kalender />
</el-Karte>

<Vorlage>
  <el-calendar v-model="aktuellesDatum">
    <Vorlagenslot="Datumszelle">
      <div Klasse="Datum-Inhalt">
        <span class="text">01</span>
        <span class="rest">Ruhe</span>
      </div>
    </Vorlage>
  </el-Kalender>
</Vorlage>
 
<Skript>
Standard exportieren {
  Daten() {
    zurückkehren {
      curDate: neues Datum()
    }
  }
}
</Skript>

npm installiere @antv/data-set @antv/g2

<Vorlage>
  <div id="Behälter" />
</Vorlage>
 
<Skript>
DataSet aus „@antv/data-set“ importieren
importiere { Diagramm } von '@antv/g2'
Standard exportieren {
  montiert() {
    const Daten = [
      { item: 'Arbeitseffizienz', a: 70, b: 30 },
      { item: 'Anwesenheit', a: 60, b: 70 },
      { item: 'Positivität', a: 50, b: 60 },
      { item: 'Einem Kollegen helfen', a: 40, b: 50 },
      { item: 'Selbstgesteuertes Lernen', a: 60, b: 70 },
      { item: 'Genauigkeit', a: 70, b: 50 }
    ]
    const { DataView } = Datensatz
    const dv = neue DataView().source(Daten)
    dv.transform({
      Typ: 'falten',
      Felder: ['a', 'b'], // Feldsatz erweitern Schlüssel: 'Benutzer', // Schlüsselfeldwert: 'Score' // Wertefeld })
 
    const chart = neues Diagramm({
      Container: "Container",
      autoFit: wahr,
      Höhe: 500
    })
    Diagramm.Daten(dv.Zeilen)
    Diagramm.Skala('Punktzahl', {
      Mindestwert: 0,
      max: 80
    })
    Diagramm.Koordinate('polar', {
      Radius: 0,8
    })
    Diagramm.Tooltip({
      geteilt: wahr,
      Fadenkreuz anzeigen: true,
      Fadenkreuz:
        Linie: {
          Stil: {
            Strichzeile: [4, 4],
            Strich: '#333'
          }
        }
      }
    })
    Diagramm.Achse('Element', {
      Zeile: null,
      tickLine: null,
      Netz: {
        Linie: {
          Stil: {
            lineDash: null
          }
        }
      }
    })
    Diagramm.Achse('Ergebnis', {
      Zeile: null,
      tickLine: null,
      Netz: {
        Linie: {
          Typ: "Linie",
          Stil: {
            lineDash: null
          }
        }
      }
    })
 
    Diagramm
      .Linie()
      .position('Artikel*Punktzahl')
      .color('Benutzer')
      .Größe(2)
    Diagramm
      .Punkt()
      .position('Artikel*Punktzahl')
      .color('Benutzer')
      .shape('Kreis')
      .Größe(4)
      .Stil({
        Strich: '#fff',
        Linienbreite: 1,
        Füllopacity: 1
      })
    Diagramm
      .Bereich()
      .position('Artikel*Punktzahl')
      .color('Benutzer')
    Diagramm.render()
  }
}
</Skript>

npm ich [email protected]

//Konfigurieren Sie die Unterstützung für mehrere Sprachen und importieren Sie Vue von „vue“. //Stellen Sie Vue vor.
importiere VueI18n von „vue-i18n“ // Importiere internationales Plug-in-Paket importiere Locale von „element-ui/lib/locale“
importiere elementEN von 'element-ui/lib/locale/lang/en' // Importiere das englische Paket von Ele.me importiere elementZH von 'element-ui/lib/locale/lang/zh-CN' // Importiere das chinesische Paket von Ele.me Vue.use(VueI18n) // Internationalisierungspaket global registrieren // Eine Instanz des Internationalisierungs-Plugins erstellen const i18n = new VueI18n({
  //Geben Sie den Sprachtyp an: zh für Chinesisch, en für englisches Gebietsschema: 'zh',
  // Fügen Sie das ElementUI-Sprachpaket zu den Sprachdatenmeldungen des Plugins hinzu: {
    // Sprachdaten in englischer Umgebung en: {
      ...elementDE
    },
    // Sprachdaten in chinesischer Umgebung zh: {
      ...elementZH
    }
  }
})
// Konfigurieren Sie die ElementUI-Sprachkonvertierungsbeziehung locale.i18n((Schlüssel, Wert) => i18n.t(Schlüssel, Wert))
 
Standard-i18n exportieren