vue3企业级项目二次封装el-table、分页步骤

好的，我可以为您介绍一下Vue3企业级项目中如何二次封装el-table，并实现分页功能的步骤。

步骤如下：

1. 安装 Element-UI

首先，需要安装 Element-UI，可以使用 npm 进行安装：

npm install element-plus --save

2. 创建封装组件

接下来，我们需要创建一个可以被重复使用的封装组件，可以命名为 `MyTable`，并在该组件中引入 Element-UI 中的 `ElTable`、`ElTableColumn`、`ElPagination` 等组件。

示例代码如下：

<template>
  <div>
    <el-table v-bind="$attrs" :data="tableData" style="width: 100%">
      <el-table-column v-for="item in columns" :key="item.prop" :prop="item.prop" :label="item.label">
      </el-table-column>
    </el-table>
    <el-pagination v-show="showPagination" v-bind="$attrs" :current-page.sync="currentPage" :page-sizes="pageSizes" :page-size="pageSize" :total="total" :layout="layout" @size-change="handleSizeChange" @current-change="handleCurrentChange"></el-pagination>
  </div>
</template>

<script>
export default {
  name: 'MyTable',
  props: {
    columns: { type: Array, required: true },
    data: { type: Array, required: true },
    showPagination: { type: Boolean, default: true },
    pageSize: { type: Number, default: 10 },
    pageSizes: { type: Array, default: () => [10, 20, 30, 40, 50] },
    total: { type: Number },
    layout: { type: String, default: 'total, sizes, prev, pager, next, jumper' },
  },
  data() {
    return {
      currentPage: 1,
      tableData: [],
    };
  },
  created() {
    this.tableData = this.data;
  },
  methods: {
    handleSizeChange(val) {
      this.pageSize = val;
      this.$emit('size-change', val);
    },
    handleCurrentChange(val) {
      this.currentPage = val;
      this.$emit('current-change', val);
    },
  },
};
</script>

在上述代码中，我们引入了 `ElTable`、`ElTableColumn`、`ElPagination` 等组件，并根据需要设置了一些默认的 props 属性。同时，我们通过 `$attrs` 绑定了父组件传入的属性，方便在父组件中使用。

3. 在父组件中使用封装组件

在父组件中使用我们刚才封装的 `MyTable` 组件，可以传入 `columns`、`data` 等属性，示例代码如下：

<template>
  <div class="container">
    <my-table :columns="columns" :data="data" @current-change="handleCurrentPageChange" @size-change="handleSizeChange"></my-table>
  </div>
</template>

<script>
import MyTable from '@/components/MyTable.vue';

export default {
  name: 'MyTableDemo',
  components: {
    MyTable,
  },
  data() {
    return {
      columns: [
        { label: '姓名', prop: 'name' },
        { label: '年龄', prop: 'age' },
        { label: '性别', prop: 'gender' },
      ],
      data: [],
      currentPage: 1,
      pageSize: 10,
      total: 0,
    };
  },
  methods: {
    // 模拟异步请求数据
    fetchData() {
      setTimeout(() => {
        this.data = [
          { name: '张三', age: 18, gender: '男' },
          { name: '李四', age: 22, gender: '女' },
          { name: '王五', age: 30, gender: '男' },
          { name: '赵六', age: 25, gender: '女' },
        ];
        this.total = 4;
      }, 1000);
    },
    handleCurrentPageChange(val) {
      // 处理页码变化
      this.currentPage = val;
      this.fetchData();
    },
    handleSizeChange(val) {
      // 处理每页显示数量变化
      this.pageSize = val;
      this.fetchData();
    },
  },
  created() {
    this.fetchData();
  },
};
</script>

在上述代码中，我们引入了刚才封装的 `MyTable` 组件，并传入了 `columns`、`data` 等属性。同时，我们在 `handleCurrentPageChange` 和 `handleSizeChange` 方法中处理了页码变化和每页显示数量变化的情况，并触发了 `fetchData` 方法重新请求数据。

4. 完成

至此，我们就完成了 Vue3 企业级项目中二次封装 `el-table` 并实现分页功能的步骤。通过封装组件，我们可以提高代码的复用性和可维护性，同时提升项目的开发效率。