Vue表格隱藏行折疊效果如何實現

這篇“Vue表格隱藏行折疊效果如何實現”文章的知識點大部分人都不太理解，所以小編給大家總結了以下內容，內容詳細，步驟清晰，具有一定的借鑒價值，希望大家閱讀完這篇文章能有所收獲，下面我們一起來看看這篇“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表格隱藏行折疊效果如何實現”這篇文章的內容，相信大家都有了一定的了解，希望小編分享的內容對大家有幫助，若想了解更多相關的知識內容，請關注億速云行業資訊頻道。