So erzielen Sie den versteckten Zeilenfaltungseffekt der Vue-Tabelle

Vue ist ein beliebtes JavaScript-Framework zum Erstellen interaktiver, leistungsstarker Webanwendungen. In Vue-Anwendungen sind Tabellen gängige UI-Komponenten, und es ist häufig erforderlich, versteckte Zeilenfaltungseffekte zu implementieren, um die Benutzererfahrung zu verbessern. In diesem Artikel wird eine Methode vorgestellt, um den Falteffekt versteckter Zeilen in Vue-Tabellen zu erzielen.

Implementierungsschritte

1. Definieren Sie in der Vorlage der Vue-Komponente die Grundstruktur der Tabelle. Verwenden Sie die v-for-Direktive, um die Zeilendaten der gerenderten Tabelle aus der Datenquelle zu durchlaufen. Unter anderem müssen Sie eine an das Klickereignis gebundene Zeile hinzufügen, um den Zeilenfaltungseffekt auszulösen. Das Codebeispiel lautet wie folgt:

<template>
  <div>
    <table>
      <thead>
        <tr>
          <th>姓名</th>
          <th>年龄</th>
          <th>身高</th>
        </tr>
      </thead>
      <tbody>
        <tr v-for="(item,index) in tableData" :key="index">
          <td>{{item.name}}</td>
          <td>{{item.age}}</td>
          <td>{{item.height}}</td>
          <td class="fold" @click="foldRow(index)"></td>
        </tr>
      </tbody>
    </table>
  </div>
</template>

2. Definieren Sie Variablen im Datenattribut der Komponente, um zu bestimmen, ob die Zeilen in der Tabelle gefaltet werden müssen. Setzen Sie beim Initialisieren der Komponente den Status aller Zeilen auf „Entfaltet“. Das Codebeispiel lautet wie folgt:

<script>
export default {
  data() {
    return {
      tableData: [
        { name: '小明', age: '20', height: '180' },
        { name: '小红', age: '19', height: '170' },
        { name: '小刚', age: '22', height: '185' },
      ],
      foldArr: [],
    };
  },
  created() {
    this.foldArr = new Array(this.tableData.length).fill(false);
  },
  methods: {
    foldRow(index) {
      this.foldArr.splice(index, 1, !this.foldArr[index]);
    },
  },
};
</script>

3. Definieren Sie eine Komponente, die Zeilen reduziert. Die Vorlage der Komponente enthält Inhalte, die minimiert werden müssen. Wenn eine Zeile gefaltet werden muss, wird der verborgene Inhalt gerendert. Das Beispiel für den Komponentencode lautet wie folgt:

<template>
  <div v-show="foldArr[index]">
    <p>{{item.intro}}</p>
  </div>
</template>

<script>
export default {
  props: ['item', 'index', 'foldArr'],
};
</script>

4. Fügen Sie im Hauptteil der Tabelle ein tr hinzu, das die gefaltete Zeilenkomponente enthält. Verwenden Sie die v-if-Anweisung, um zu bestimmen, ob die aktuelle Zeile gefaltet werden muss. Rendern Sie die gefaltete Zeilenkomponente. Das Codebeispiel lautet wie folgt:

<template>
  <div>
    <table>
      <thead>
        <tr>
          <th>姓名</th>
          <th>年龄</th>
          <th>身高</th>
        </tr>
      </thead>
      <tbody>
        <tr v-for="(item,index) in tableData" :key="index">
          <td>{{item.name}}</td>
          <td>{{item.age}}</td>
          <td>{{item.height}}</td>
          <td class="fold" @click="foldRow(index)"></td>
        </tr>
        <tr v-for="(item,index) in tableData" :key="index">
          <td colspan="4" v-if="foldArr[index]">
            <fold-row :item="item" :index="index" :foldArr="foldArr"></fold-row>
          </td>
        </tr>
      </tbody>
    </table>
  </div>
</template>

<script>
import FoldRow from '@/components/FoldRow.vue';

export default {
  components: {
    FoldRow,
  },
  data() {
    return {
      tableData: [
        { name: '小明', age: '20', height: '180', intro: '我是小明，今年20岁，身高180cm' },
        { name: '小红', age: '19', height: '170', intro: '我是小红，今年19岁，身高170cm' },
        { name: '小刚', age: '22', height: '185', intro: '我是小刚，今年22岁，身高185cm' },
      ],
      foldArr: [],
    };
  },
  created() {
    this.foldArr = new Array(this.tableData.length).fill(false);
  },
  methods: {
    foldRow(index) {
      this.foldArr.splice(index, 1, !this.foldArr[index]);
    },
  },
};
</script>

5. Für die Stilverarbeitung können Sie CSS zur Steuerung verwenden. Indem Sie die Breite und Höhe von .fold auf 0 setzen, nimmt es keinen Platz ein. Durch Festlegen der Stile der Pseudoelemente .fold:before und .fold:after können Sie das Faltsymbol ändern. Das Codebeispiel lautet wie folgt:

<style lang="scss">
.fold {
  position: relative;
  width: 0;
  height: 0;
  &:before,
  &:after {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    content: '';
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background-color: #999;
    transition: all 0.2s ease;
  }
  &:before {
    top: 0;
  }
  &:after {
    bottom: 0;
  }
}
.fold.folded:before {
  transform: translateY(2px) translateX(-50%) rotate(45deg);
}
.fold.folded:after {
  transform: translateY(-2px) translateX(-50%) rotate(-45deg);
}
</style>

Bisher haben wir den Effekt der versteckten Zeilenfaltung der Vue-Tabelle erfolgreich implementiert. Durch diese Methode können wir die Benutzererfahrung auf einfache Weise verbessern und Benutzern das Anzeigen und Verwalten von Tabellendaten erleichtern.

Das obige ist der detaillierte Inhalt vonSo erzielen Sie den versteckten Zeilenfaltungseffekt der Vue-Tabelle. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!