vue3 封装table

Vue3中封装Table可以使用组件化的思想，将表格的头部、行数据、分页等功能进行拆解，然后再组合成Table组件。以下是一个基本的Table组件封装示例：

<template>
  <div class="table-container">
    <table>
      <thead>
        <tr>
          <th v-for="column in columns" :key="column.key">{{ column.title }}</th>
        </tr>
      </thead>
      <tbody>
        <tr v-for="row in rows" :key="row.id">
          <td v-for="column in columns" :key="column.key">{{ row[column.key] }}</td>
        </tr>
      </tbody>
    </table>
    <div class="pagination">
      <button @click="prevPage">上一页</button>
      <span>{{ currentPage }}/{{ totalPages }}</span>
      <button @click="nextPage">下一页</button>
    </div>
  </div>
</template>

<script>
export default {
  name: 'Table',
  props: {
    columns: {
      type: Array,
      default: () => []
    },
    data: {
      type: Array,
      default: () => []
    },
    pageSize: {
      type: Number,
      default: 10
    }
  },
  data() {
    return {
      currentPage: 1,
      totalRows: this.data.length
    }
  },
  computed: {
    totalPages() {
      return Math.ceil(this.totalRows / this.pageSize)
    },
    rows() {
      const start = (this.currentPage - 1) * this.pageSize
      const end = start + this.pageSize
      return this.data.slice(start, end)
    }
  },
  methods: {
    prevPage() {
      if (this.currentPage > 1) {
        this.currentPage--
      }
    },
    nextPage() {
      if (this.currentPage < this.totalPages) {
        this.currentPage++
      }
    }
  }
}
</script>

<style scoped>
.table-container {
  margin: 20px;
}

table {
  border-collapse: collapse;
  width: 100%;
}

th,
td {
  border: 1px solid black;
  padding: 5px;
  text-align: center;
}

th {
  background-color: #ddd;
}

.pagination {
  display: flex;
  justify-content: center;
  margin-top: 10px;
}

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

在这个示例中，Table组件接受两个props: columns和data。columns是表格的头部信息，是一个包含title和key两个属性的数组。data是表格的行数据，是一个数组，每个元素是一个对象，对象的属性名与columns中的key对应。

Table组件还有一个pageSize的props，用于设置每页显示的行数。组件内部使用computed计算出总页数totalPages和当前页的行数据rows。同时，组件内部维护了一个currentPage的变量，用于记录当前页码。

在模板中，使用v-for遍历columns和rows数组，生成表格的头部和行数据。同时，在底部添加了一个简单的分页控制器，通过点击上一页和下一页按钮来切换页码。

这个示例只是基本的Table组件封装，实际的业务需求可能更加复杂，需要根据实际情况进行调整。