Bagaimana untuk mencapai kesan lipatan baris tersembunyi jadual Vue

Vue ialah rangka kerja JavaScript yang popular untuk membina aplikasi web interaktif berprestasi tinggi. Dalam aplikasi Vue, jadual ialah komponen UI biasa, dan selalunya perlu untuk melaksanakan kesan lipatan baris tersembunyi untuk meningkatkan pengalaman pengguna. Artikel ini akan memperkenalkan kaedah untuk mencapai kesan lipatan baris tersembunyi dalam jadual Vue.

Langkah pelaksanaan

1. Dalam templat komponen Vue, tentukan struktur asas jadual. Gunakan arahan v-for untuk melintasi data baris jadual yang diberikan daripada sumber data. Antaranya, anda perlu menambah baris terikat pada acara klik untuk mencetuskan kesan lipatan baris. Contoh kod adalah seperti berikut:

<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. Tentukan pembolehubah dalam atribut data komponen untuk menentukan sama ada baris dalam jadual perlu dilipat. Dan apabila memulakan komponen, tetapkan keadaan semua baris untuk dibuka. Contoh kod adalah seperti berikut:

<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. Tentukan komponen yang meruntuhkan baris. Templat komponen mengandungi kandungan yang perlu diruntuhkan. Apabila satu baris perlu dilipat, kandungan tersembunyi dipaparkan. Contoh kod komponen adalah seperti berikut:

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

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

4. Dalam badan jadual, tambahkan tr yang mengandungi komponen baris terlipat. Gunakan arahan v-if untuk menentukan sama ada baris semasa perlu dilipat Jika ia dilipat, jadikan komponen baris terlipat. Contoh kod adalah seperti berikut:

<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. Untuk pemprosesan gaya, anda boleh menggunakan CSS untuk mengawalnya. Dengan menetapkan lebar dan tinggi .fold kepada 0, ia tidak memerlukan ruang. Dengan menetapkan gaya .fold:before dan .fold:after pseudo-elements, anda boleh menukar ikon lipatan. Contoh kod adalah seperti berikut:

<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>

Setakat ini, kami telah berjaya melaksanakan kesan lipatan baris tersembunyi jadual Vue. Melalui kaedah ini, kami boleh meningkatkan pengalaman pengguna dengan mudah dan memudahkan pengguna melihat dan mengurus data jadual.

Atas ialah kandungan terperinci Bagaimana untuk mencapai kesan lipatan baris tersembunyi jadual Vue. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!