Heim > Web-Frontend > Front-End-Fragen und Antworten > Element Vue zeigt ausgeblendete Spalten dynamisch an

Element Vue zeigt ausgeblendete Spalten dynamisch an

王林
Freigeben: 2023-05-24 13:49:37
Original
2107 Leute haben es durchsucht

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>
Nach dem Login kopieren
  1. 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>
Nach dem Login kopieren
  1. Ä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>
Nach dem Login kopieren

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!

Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage