Vue3 Table组件怎么使用

在Vue3中，表格（Table）是展示数据的常见组件之一。Vue3提供了多种方式来创建和使用表格组件，本文将详细介绍如何使用Vue3构建一个功能丰富的表格组件。

1. 基本表格组件

首先，我们可以创建一个简单的表格组件来展示数据。以下是一个基本的表格组件示例：

<template>
  <table>
    <thead>
      <tr>
        <th v-for="(header, index) in headers" :key="index">{{ header }}</th>
      </tr>
    </thead>
    <tbody>
      <tr v-for="(row, rowIndex) in rows" :key="rowIndex">
        <td v-for="(cell, cellIndex) in row" :key="cellIndex">{{ cell }}</td>
      </tr>
    </tbody>
  </table>
</template>

<script>
export default {
  props: {
    headers: {
      type: Array,
      required: true
    },
    rows: {
      type: Array,
      required: true
    }
  }
}
</script>

<style scoped>
table {
  width: 100%;
  border-collapse: collapse;
}

th, td {
  border: 1px solid #ddd;
  padding: 8px;
  text-align: left;
}

th {
  background-color: #f2f2f2;
}
</style>

使用示例

<template>
  <div>
    <TableComponent :headers="headers" :rows="rows" />
  </div>
</template>

<script>
import TableComponent from './TableComponent.vue';

export default {
  components: {
    TableComponent
  },
  data() {
    return {
      headers: ['Name', 'Age', 'Address'],
      rows: [
        ['John Doe', 30, '123 Main St'],
        ['Jane Smith', 25, '456 Elm St'],
        ['Sam Green', 35, '789 Oak St']
      ]
    };
  }
}
</script>

2. 添加排序功能

为了让表格更具交互性，我们可以添加排序功能。以下是一个支持按列排序的表格组件示例：

<template>
  <table>
    <thead>
      <tr>
        <th v-for="(header, index) in headers" :key="index" @click="sortTable(index)">
          {{ header }}
          <span v-if="sortColumn === index">{{ sortDirection === 'asc' ? '↑' : '↓' }}</span>
        </th>
      </tr>
    </thead>
    <tbody>
      <tr v-for="(row, rowIndex) in sortedRows" :key="rowIndex">
        <td v-for="(cell, cellIndex) in row" :key="cellIndex">{{ cell }}</td>
      </tr>
    </tbody>
  </table>
</template>

<script>
export default {
  props: {
    headers: {
      type: Array,
      required: true
    },
    rows: {
      type: Array,
      required: true
    }
  },
  data() {
    return {
      sortColumn: null,
      sortDirection: 'asc'
    };
  },
  computed: {
    sortedRows() {
      if (this.sortColumn === null) return this.rows;
      return [...this.rows].sort((a, b) => {
        if (a[this.sortColumn] < b[this.sortColumn]) return this.sortDirection === 'asc' ? -1 : 1;
        if (a[this.sortColumn] > b[this.sortColumn]) return this.sortDirection === 'asc' ? 1 : -1;
        return 0;
      });
    }
  },
  methods: {
    sortTable(columnIndex) {
      if (this.sortColumn === columnIndex) {
        this.sortDirection = this.sortDirection === 'asc' ? 'desc' : 'asc';
      } else {
        this.sortColumn = columnIndex;
        this.sortDirection = 'asc';
      }
    }
  }
}
</script>

<style scoped>
table {
  width: 100%;
  border-collapse: collapse;
}

th, td {
  border: 1px solid #ddd;
  padding: 8px;
  text-align: left;
}

th {
  background-color: #f2f2f2;
  cursor: pointer;
}
</style>

使用示例

<template>
  <div>
    <SortableTableComponent :headers="headers" :rows="rows" />
  </div>
</template>

<script>
import SortableTableComponent from './SortableTableComponent.vue';

export default {
  components: {
    SortableTableComponent
  },
  data() {
    return {
      headers: ['Name', 'Age', 'Address'],
      rows: [
        ['John Doe', 30, '123 Main St'],
        ['Jane Smith', 25, '456 Elm St'],
        ['Sam Green', 35, '789 Oak St']
      ]
    };
  }
}
</script>

3. 添加分页功能

对于大量数据，分页功能是必不可少的。以下是一个支持分页的表格组件示例：

<template>
  <div>
    <table>
      <thead>
        <tr>
          <th v-for="(header, index) in headers" :key="index">{{ header }}</th>
        </tr>
      </thead>
      <tbody>
        <tr v-for="(row, rowIndex) in paginatedRows" :key="rowIndex">
          <td v-for="(cell, cellIndex) in row" :key="cellIndex">{{ cell }}</td>
        </tr>
      </tbody>
    </table>
    <div class="pagination">
      <button @click="prevPage" :disabled="currentPage === 1">Previous</button>
      <span>{{ currentPage }} / {{ totalPages }}</span>
      <button @click="nextPage" :disabled="currentPage === totalPages">Next</button>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    headers: {
      type: Array,
      required: true
    },
    rows: {
      type: Array,
      required: true
    },
    itemsPerPage: {
      type: Number,
      default: 5
    }
  },
  data() {
    return {
      currentPage: 1
    };
  },
  computed: {
    totalPages() {
      return Math.ceil(this.rows.length / this.itemsPerPage);
    },
    paginatedRows() {
      const start = (this.currentPage - 1) * this.itemsPerPage;
      const end = start + this.itemsPerPage;
      return this.rows.slice(start, end);
    }
  },
  methods: {
    prevPage() {
      if (this.currentPage > 1) {
        this.currentPage--;
      }
    },
    nextPage() {
      if (this.currentPage < this.totalPages) {
        this.currentPage++;
      }
    }
  }
}
</script>

<style scoped>
table {
  width: 100%;
  border-collapse: collapse;
}

th, td {
  border: 1px solid #ddd;
  padding: 8px;
  text-align: left;
}

th {
  background-color: #f2f2f2;
}

.pagination {
  margin-top: 10px;
  text-align: center;
}

button {
  margin: 0 5px;
}
</style>

使用示例

<template>
  <div>
    <PaginatedTableComponent :headers="headers" :rows="rows" :itemsPerPage="3" />
  </div>
</template>

<script>
import PaginatedTableComponent from './PaginatedTableComponent.vue';

export default {
  components: {
    PaginatedTableComponent
  },
  data() {
    return {
      headers: ['Name', 'Age', 'Address'],
      rows: [
        ['John Doe', 30, '123 Main St'],
        ['Jane Smith', 25, '456 Elm St'],
        ['Sam Green', 35, '789 Oak St'],
        ['Alice Johnson', 28, '321 Pine St'],
        ['Bob Brown', 40, '654 Maple St'],
        ['Charlie Davis', 22, '987 Cedar St']
      ]
    };
  }
}
</script>

4. 总结

通过以上示例，我们展示了如何在Vue3中创建和使用表格组件，并逐步添加了排序和分页功能。这些功能可以根据实际需求进行扩展和定制，以满足不同的业务场景。Vue3的灵活性和强大的组合API使得构建复杂的表格组件变得更加简单和高效。