Vue テーブルの非表示の行折りたたみ効果を実現する方法

Vue は、インタラクティブで高性能な Web アプリケーションを構築するための人気のある JavaScript フレームワークです。 Vue アプリケーションでは、テーブルが一般的な UI コンポーネントであり、多くの場合、ユーザー エクスペリエンスを向上させるために非表示の行折りたたみ効果を実装する必要があります。この記事では、Vue テーブルの非表示行の折り畳み効果を実現する方法を紹介します。

実装手順

1. Vue コンポーネントのテンプレートで、テーブルの基本構造を定義します。 v-for ディレクティブを使用して、データ ソースからレンダリングされたテーブルの行データを走査します。その中で、行折りたたみ効果をトリガーするには、クリック イベントにバインドされた行を追加する必要があります。コード例は次のとおりです。

<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. コンポーネントのデータ属性に変数を定義して、テーブル内の行を折りたたむ必要があるかどうかを決定します。そして、コンポーネントを初期化するときに、すべての行の状態を展開された状態に設定します。コード例は次のとおりです。

<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. テーブルの本体に、折りたたまれた行コンポーネントを含む 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 の幅と高さを 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 中国語 Web サイトの他の関連記事を参照してください。