vue3+Arco Design，轻松封装Table组件！

2024-02-16 04:27:52

在Vue3开发中，Arco Design以其强大的组件库和完善的UI体系备受推崇。其中，Table组件是构建数据表格的利器，但其复杂的配置和使用方式往往让人望而生畏。本文将介绍如何基于Vue3+Arco Design对Table组件进行二次封装，打造一款功能强大的定制化组件。

Hook函数的妙用

Vue3中的hook函数为组件开发提供了强大的扩展能力。通过使用hook函数，我们可以拦截组件生命周期的关键时刻，执行自定义逻辑。在Table组件的二次封装中，我们可以利用以下hook函数：

created()：组件实例创建时触发，适合执行数据加载或初始化操作。
mounted()：组件挂载到DOM后触发，适合完成最终渲染前的准备工作。
beforeUpdate()：组件更新之前触发，适合在组件更新前进行必要的调整。

统一数据加载

表格数据是Table组件的核心。在二次封装中，我们可以将数据加载逻辑提取出来，通过hook函数在组件创建时自动触发。具体实现如下：

created() {
  this.loadData();
}

loadData() {
  // 根据实际业务逻辑加载数据
}

分页控制

分页是表格组件的常见需求。在二次封装中，我们可以将分页请求和分页变换的逻辑封装成独立的方法，并通过hook函数在组件更新前执行：

beforeUpdate() {
  if (this.pagination.currentPage !== this.oldCurrentPage) {
    this.loadPage();
  }
}

loadPage() {
  // 根据实际业务逻辑进行分页请求
}

显示属性自定义

Table组件的显示属性，例如列宽、行高、边框样式等，往往需要根据实际业务需求进行调整。在二次封装中，我们可以提供一组可配置的属性，允许开发者根据需要自定义显示效果：

export const props = {
  columnWidth: {
    type: Array,
    default: () => []
  },
  rowHeight: {
    type: Number,
    default: 50
  },
  borderWidth: {
    type: Number,
    default: 1
  }
}

实例代码

以下是一个二次封装后的Table组件示例：

<template>
  <a-table :data="tableData" :columns="columns" :pagination="pagination" />
</template>

<script>
import { ref } from 'vue';
import { ATable, ATablePagination } from 'arco-design-vue';

export default {
  components: {
    ATable,
    ATablePagination
  },
  setup() {
    const tableData = ref([]);
    const columns = ref([]);
    const pagination = ref({
      currentPage: 1,
      pageSize: 10,
      total: 0
    });

    const oldCurrentPage = ref(1);

    return {
      tableData,
      columns,
      pagination,
      oldCurrentPage
    };
  },
  created() {
    this.loadData();
  },
  mounted() {
    // 根据列配置自动生成列宽
    this.columns.value = this.columns.value.map(column => {
      column.width = this.columnWidth[column.key] || 'auto';
      return column;
    });
  },
  beforeUpdate() {
    if (this.pagination.currentPage !== this.oldCurrentPage) {
      this.loadPage();
    }
  },
  methods: {
    loadData() {
      // 根据实际业务逻辑加载数据
    },
    loadPage() {
      // 根据实际业务逻辑进行分页请求
    }
  }
};
</script>