Element Vue zeigt ausgeblendete Spalten dynamisch an

Beim Erstellen von Seiten mit Vue.js und Element UI müssen Sie häufig Tabellen zur Anzeige von Daten verwenden. Manchmal ist es notwendig, bestimmte Spalten dynamisch ein- oder auszublenden, damit Benutzer die benötigten Informationen an ihre Bedürfnisse anpassen können. Element UI bietet eine praktische, benutzerfreundliche und leistungsstarke Tabellenkomponente. Dieser Artikel konzentriert sich auf das dynamische Ein- und Ausblenden von Spalten in Element UI-Tabellen.

1. Grundidee
Die Tabellenkomponente in Element UI stellt Spaltenobjekte bereit, und jedes Spaltenobjekt kann die Eigenschaften einer Spalte festlegen. Wenn Sie eine Spalte dynamisch ein- oder ausblenden möchten, können Sie dem Spaltenobjekt daher ein V-IF-Steuerattribut hinzufügen.

2. Beispielanalyse
Hier nehmen wir die el-table-Komponente in Element UI als Beispiel, um zu demonstrieren, wie Spalten über Vue.js dynamisch angezeigt oder ausgeblendet werden. Angenommen, wir haben einen Datensatz wie unten gezeigt. Die Spalten „Kodierung“ und „Status“ sind Spalten, die dynamisch ein- oder ausgeblendet werden müssen.

1. Fügen Sie zunächst den folgenden Code zur Tabellenvorlage hinzu:

<template>
  <el-table :data="tableData" style="width: 100%">
    <el-table-column
      prop="name"
      label="姓名">
    </el-table-column>
    <el-table-column
      prop="age"
      label="年龄">
    </el-table-column>
    <el-table-column
      v-if="showCode"
      prop="code"
      label="编码">
    </el-table-column>
    <el-table-column
      v-if="showStatus"
      prop="status"
      label="状态">
    </el-table-column>
  </el-table>
</template>

2. Fügen Sie die Datenoption zum Skript-Tag hinzu und fügen Sie zwei Datenattribute hinzu, showCode und showStatus, mit den Anfangswerten true.

<script>
export default {
  data() {
    return {
      tableData: [
        { name: '张三', age: 18, code: '001', status: '正常' },
        { name: '李四', age: 23, code: '002', status: '异常' },
        { name: '王五', age: 30, code: '003', status: '正常' },
        { name: '赵六', age: 40, code: '004', status: '异常' }
      ],
      showCode: true,
      showStatus: true
    }
  }
}
</script>

3. Ändern Sie abschließend die Werte von showCode und showStatus im Click-Ereignis, um Spalten dynamisch anzuzeigen oder auszublenden. Zum Beispiel:

<el-button @click="showCode = !showCode">显示/隐藏编码</el-button>
<el-button @click="showStatus = !showStatus">显示/隐藏状态</el-button>

Nachdem Sie auf die Schaltfläche „Codierung anzeigen/ausblenden“ geklickt haben, können Sie den unten gezeigten Effekt sehen. Wenn der Wert von showCode „true“ ist, wird die Spalte „Encoding“ angezeigt; wenn der Wert von showCode „false“ ist, wird die Spalte „Encoding“ ausgeblendet.

4. Zusammenfassung
In diesem Artikel wird erläutert, wie Spalten in der Element-UI-Tabellenkomponente dynamisch angezeigt oder ausgeblendet werden. Wir müssen dem Spaltenobjekt lediglich ein v-if-Steuerattribut hinzufügen und seinen Wert in der entsprechenden Operation ändern, um diese Funktion einfach zu implementieren. Mit dieser Methode können Benutzer die benötigten Informationen entsprechend ihren Anforderungen frei auswählen und so die Flexibilität und Anpassbarkeit der Seite verbessern.

Das obige ist der detaillierte Inhalt vonElement Vue zeigt ausgeblendete Spalten dynamisch an. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!