한 페이지에 vue에 여러 테이블을 표시하는 방법-프런트엔드 Q&A-php.cn

한 페이지에 vue에 여러 테이블을 표시하는 방법

PHPz

풀어 주다： 2023-04-12 10:06:29

원래의

3362명이 탐색했습니다.

프런트 엔드 개발에서 Vue.js는 복잡한 단일 페이지 애플리케이션을 더 쉽게 개발할 수 있게 해주는 인기 있는 JavaScript 프레임워크입니다. Vue.js는 데이터 중심 뷰를 통해 단방향 데이터 흐름을 구현합니다. 개발 과정에서 데이터를 표시하기 위해 테이블을 사용해야 하는 경우가 많습니다. Vue.js는 일반적으로 사용되는 몇 가지 테이블 구성 요소를 제공하지만 한 페이지에 여러 테이블을 표시해야 하는 경우 어떻게 해야 할까요? 이 문서에서는 한 페이지에 여러 테이블을 표시하는 방법을 자세히 설명합니다.

1. 두 개의 구성 요소를 사용하여 두 개의 테이블 구현

Vue.js의 구성 요소는 독립적인 단위이며 해당 동작과 데이터가 다른 컨텍스트에서 사용될 수 있습니다. 구성 요소가 매번 다시 렌더링된다는 점을 고려하면 두 가지 구성 요소를 사용하여 서로 다른 테이블 표시를 얻을 수 있습니다.

먼저 "Table1"과 "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>

로그인 후 복사

여기서 두 개의 테이블 컴포넌트를 생성하고 서로 간섭하지 않는 props를 사용하여 데이터를 전달합니다. 상위 구성 요소에서는 v-bind 명령을 사용하여 두 구성 요소에 각각 데이터를 전달합니다.

<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. 하나의 컴포넌트를 사용하여 여러 테이블 구현

위 방법에서는 여러 컴포넌트를 생성해야 하며, 테이블을 더 추가해야 하는 경우 지속적으로 컴포넌트를 생성해야 합니다. 따라서 컴포넌트의 props를 수정하여 동일한 페이지에 여러 테이블을 표시할 수 있습니다.

테이블 구성 요소를 수정해 보겠습니다.

<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 구성 요소를 사용할 수 있지만 각 테이블에 서로 다른 props를 전달해야 합니다.

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

로그인 후 복사

이런 방식으로 우리는 다중 테이블은 테이블 구성 요소를 통해 표시될 수 있습니다.

요약하자면 두 개의 구성 요소를 사용하여 여러 테이블을 구현할 수도 있고, 하나의 구성 요소를 사용하여 여러 테이블을 표시할 수도 있습니다. 전자는 여러 구성요소를 생성해야 하는 반면, 후자는 사용할 구성요소에 추가 소품을 추가해야 합니다. 프로젝트의 필요에 따라 데이터를 표시하는 적절한 방법을 선택할 수 있습니다.

위 내용은 한 페이지에 vue에 여러 테이블을 표시하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!