vue3中如何封装动态表格？

在Vue3中封装动态表格可以遵循以下步骤：

1.创建一个Table组件，该组件包含以下属性：

- columns：列定义数组，每个列定义包括列名、字段名称、列宽度等信息；
- data：数据数组，每个元素是一个对象，包含所有列定义中的字段；
- pagination：是否分页；
- pageSize：每页显示的数据量；
- currentPage：当前页码。

2.在Table组件中，使用v-for指令根据列定义数组渲染表格头部，并使用v-for指令根据数据数组渲染表格行。

3.在Table组件中，使用computed属性计算分页后的数据数组，并使用v-for指令渲染分页组件。

4.在Table组件中，使用emit方法触发自定义事件，响应表格行的点击事件。

5.在Table组件外部，使用props属性传递数据和列定义数组给Table组件，并使用v-on指令监听自定义事件。

6.在Table组件外部，使用methods属性处理自定义事件的响应，并更新组件的状态或调用其他方法。

下面是一个简单的Table组件示例：

<template>
  <div>
    <table>
      <thead>
        <tr>
          <th v-for="column in columns" :key="column.field" :style="{ width: column.width + 'px' }">{{ column.name }}</th>
        </tr>
      </thead>
      <tbody>
        <tr v-for="row in displayData" :key="row.id" @click="$emit('rowClick', row)">
          <td v-for="column in columns" :key="column.field">{{ row[column.field] }}</td>
        </tr>
      </tbody>
    </table>
    <div v-if="pagination">
      <button :disabled="currentPage === 1" @click="currentPage--">Previous</button>
      <button v-for="page in totalPages" :key="page" :class="{ active: currentPage === page }" @click="currentPage = page">{{ page }}</button>
      <button :disabled="currentPage === totalPages" @click="currentPage++">Next</button>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    columns: {
      type: Array,
      required: true
    },
    data: {
      type: Array,
      required: true
    },
    pagination: {
      type: Boolean,
      default: false
    },
    pageSize: {
      type: Number,
      default: 10
    }
  },
  data() {
    return {
      currentPage: 1
    }
  },
  computed: {
    displayData() {
      const startIndex = (this.currentPage - 1) * this.pageSize;
      const endIndex = startIndex + this.pageSize;
      return this.data.slice(startIndex, endIndex);
    },
    totalPages() {
      return Math.ceil(this.data.length / this.pageSize);
    }
  }
}
</script>

<style scoped>
table {
  border-collapse: collapse;
  width: 100%;
}
th, td {
  border: 1px solid #ccc;
  padding: 8px;
  text-align: left;
}
th {
  background-color: #f2f2f2;
}
tr:nth-child(even) {
  background-color: #f2f2f2;
}
.active {
  background-color: #4CAF50;
  color: white;
}
</style>

使用该组件的示例代码：

<template>
  <div>
    <table-component :columns="columns" :data="data" :pagination="true" @rowClick="onRowClick"></table-component>
  </div>
</template>

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

export default {
  components: {
    TableComponent
  },
  data() {
    return {
      columns: [
        { name: 'ID', field: 'id', width: 50 },
        { name: 'Name', field: 'name', width: 200 },
        { name: 'Age', field: 'age', width: 100 }
      ],
      data: [
        { id: 1, name: 'John', age: 25 },
        { id: 2, name: 'Alice', age: 30 },
        { id: 3, name: 'Bob', age: 35 },
        { id: 4, name: 'Charlie', age: 40 },
        { id: 5, name: 'David', age: 45 },
        { id: 6, name: 'Ella', age: 50 },
        { id: 7, name: 'Frank', age: 55 },
        { id: 8, name: 'Grace', age: 60 },
        { id: 9, name: 'Helen', age: 65 },
        { id: 10, name: 'Ivy', age: 70 },
        { id: 11, name: 'Jack', age: 75 },
        { id: 12, name: 'Karen', age: 80 }
      ]
    }
  },
  methods: {
    onRowClick(row) {
      console.log('Row clicked:', row);
    }
  }
}
</script>