How to display multiple tables in vue on one page

In front-end development, Vue.js is a popular JavaScript framework that makes it easier to develop complex single-page applications. Vue.js implements one-way data flow through data-driven views. During the development process, we often need to use tables to display data. Vue.js provides some commonly used table components, but what if we need to display multiple tables on one page? This article will detail how to display multiple tables on one page.

1. Use two components to implement two tables

The component in Vue.js is an independent unit, and its behavior and data can be used in different contexts. Considering that the component will be re-rendered every time, we can use two components to achieve different table displays.

First, we create two components, "Table1" and "Table2":

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

Here, we create two table components and use props that do not interfere with each other to pass data. In the parent component, we pass the data to the two components respectively, using the v-bind directive:

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

In this way, two tables can be displayed on the same page.

2. Use one component to implement multiple tables

In the above method, we need to create multiple components. If we need to add more tables, we need to continuously create components. Therefore, we can display multiple tables on the same page by modifying the props of the component.

Let’s modify the Table component:

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

A new prop is added to the component to distinguish different tables. Now we can use the same Table component in the parent component, but we need to pass different props to each 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>

In the table, we can render different data based on different tableIds:

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

In this way, we can display multiple tables through a Table component.

To sum up, we can use two components to implement multiple tables, or use one component to display multiple tables. The former requires creating multiple components, while the latter requires adding additional props to the components for use. Depending on the needs of the project, we can choose the appropriate method to display the data.

The above is the detailed content of How to display multiple tables in vue on one page. For more information, please follow other related articles on the PHP Chinese website!