vueで複数のテーブルを1ページに表示する方法-フロントエンドQ&A-php.cn

vueで複数のテーブルを1ページに表示する方法

PHPz

リリース： 2023-04-12 10:06:29

オリジナル

3361 人が閲覧しました

フロントエンド開発では、Vue.js は、複雑な単一ページアプリケーションの開発を容易にする人気の JavaScript フレームワークです。 Vue.js は、データ駆動型ビューを通じて一方向のデータフローを実装します。開発プロセスでは、多くの場合、テーブルを使用してデータを表示する必要があります。 Vue.js には、一般的に使用されるテーブルコンポーネントがいくつか用意されていますが、1 ページに複数のテーブルを表示する必要がある場合はどうすればよいでしょうか?この記事では、1 ページに複数の表を表示する方法について詳しく説明します。

1. 2 つのコンポーネントを使用して 2 つのテーブルを実装する

Vue.js のコンポーネントは独立したユニットであり、その動作とデータは異なるコンテキストで使用できます。コンポーネントが毎回再レンダリングされることを考慮すると、2 つのコンポーネントを使用して異なるテーブル表示を実現できます。

まず、「Table1」と「Table2」という 2 つのコンポーネントを作成します。

<template>
  <table>
    <thead>
      <tr>
        <th>ID</th>
        <th>Name</th>
        <th>Age</th>
      </tr>
    </thead>
    <tbody>
      <tr v-for="item in data" :key="item.id">
        <td>{{item.id}}</td>
        <td>{{item.name}}</td>
        <td>{{item.age}}</td>
      </tr>
    </tbody>
  </table>
</template>

<script>
export default {
  props: {
    data: Array
  }
}
</script>

ログイン後にコピー

ここでは、2 つのテーブルコンポーネントを作成し、互いに干渉しない props を使用してデータを渡します。親コンポーネントでは、v-bind ディレクティブを使用して、データを 2 つのコンポーネントにそれぞれ渡します。

<template>
  <div>
    <Table1 :data="data1"></Table1>
    <Table2 :data="data2"></Table2>
  </div>
</template>

<script>
import Table1 from 'path/to/Table1.vue'
import Table2 from 'path/to/Table2.vue'

export default {
  components: {
    Table1,
    Table2
  },
  data() {
    return {
      data1: [...],
      data2: [...]
    }
  }
}
</script>

ログイン後にコピー

このようにして、2 つのテーブルを同じページに表示できます。

2. 1 つのコンポーネントを使用して複数のテーブルを実装する

上記の方法では、複数のコンポーネントを作成する必要がありますが、さらにテーブルを追加する必要がある場合は、コンポーネントを継続的に作成する必要があります。したがって、コンポーネントの props を変更することで、同じページに複数のテーブルを表示できます。

Table コンポーネントを変更しましょう:

<template>
  <table>
    <thead>
      <tr>
        <th>ID</th>
        <th>Name</th>
        <th>Age</th>
      </tr>
    </thead>
    <tbody>
      <tr v-for="item in data" :key="item.id">
        <td>{{item.id}}</td>
        <td>{{item.name}}</td>
        <td>{{item.age}}</td>
      </tr>
    </tbody>
  </table>
</template>

<script>
export default {
  props: {
    data: Array,
    tableId: String
  }
}
</script>

ログイン後にコピー

さまざまなテーブルを区別するために、新しいプロパティがコンポーネントに追加されます。これで、親コンポーネントで同じ Table コンポーネントを使用できるようになりましたが、各テーブルに異なるプロパティを渡す必要があります:

<template>
  <div>
    <Table :data="data1" tableId="table1"></Table>
    <Table :data="data2" tableId="table2"></Table>
  </div>
</template>

<script>
import Table from 'path/to/Table.vue'

export default {
  components: {
    Table
  },
  data() {
    return {
      data1: [...],
      data2: [...]
    }
  }
}
</script>

ログイン後にコピー

テーブルでは、異なる tableId に基づいて異なるデータをレンダリングできます:

<template>
  <table>
    <thead>
      <tr>
        <th>ID</th>
        <th>Name</th>
        <th>Age</th>
      </tr>
    </thead>
    <tbody>
      <tr v-for="item in filteredData" :key="item.id">
        <td>{{item.id}}</td>
        <td>{{item.name}}</td>
        <td>{{item.age}}</td>
      </tr>
    </tbody>
  </table>
</template>

<script>
export default {
  props: {
    data: Array,
    tableId: String
  },
  computed: {
    filteredData() {
      return this.data.filter(item => {
        return item.tableId === this.tableId
      })
    }
  }
}
</script>

ログイン後にコピー

このようにして、Table コンポーネントを通じて複数のテーブルを表示できます。

要約すると、2 つのコンポーネントを使用して複数のテーブルを実装することも、1 つのコンポーネントを使用して複数のテーブルを表示することもできます。前者では複数のコンポーネントを作成する必要がありますが、後者では使用するコンポーネントに追加の props を追加する必要があります。プロジェクトのニーズに応じて、データを表示する適切な方法を選択できます。

以上がvueで複数のテーブルを1ページに表示する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。