Vue表格隱藏行折疊效果怎麼實現

Vue是一個流行的JavaScript框架，用於建立互動性強、效能高的Web應用程式。在Vue應用程式中，表格是常見的UI元件，其中常常需要實作隱藏行折疊效果來提升使用者體驗。本篇文章將介紹一種實現Vue表格隱藏行折疊效果的方法。

實作步驟

1. 在Vue元件的範本中，定義表格的基本結構。使用v-for指令從資料來源遍歷渲染表格的行資料。其中，需要新增一個綁定click事件的行，用於觸發行折疊效果。程式碼範例如下：

<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. 在元件的data屬性中定義變數，用於判斷表格中的行是否需要折疊。並且在初始化組件時，將所有行的狀態設為未折疊。程式碼範例如下：

<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. 定義一個折疊行的元件。組件的模板包含需要折疊的內容。當某一行需要折疊時，將隱藏內容渲染進來。元件程式碼範例如下：

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

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

4. 在表格的body中，加入一個包含折疊行元件的tr。透過v-if指令判斷目前行是否需要折疊，如果折疊，則渲染折疊行元件。程式碼範例如下：

<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. 對於樣式的處理，可以使用CSS進行控制。透過設定.fold的width和height為0，使其無佔用空間。透過設定.fold:before和.fold:after偽元素的樣式，來實現折疊圖示的切換。程式碼範例如下：

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

至此，我們已成功地實現了Vue表格隱藏行折疊效果。透過這個方法，我們可以輕鬆提升使用者體驗，讓使用者更方便地查看和管理表格資料。

以上是Vue表格隱藏行折疊效果怎麼實現的詳細內容。更多資訊請關注PHP中文網其他相關文章！