拒绝框架束缚！69行代码玩转Vue、React、San通用Table组件

2023-03-04 09:11:09

跨框架的自由之翼：通用 Table 组件

导言

前端开发世界中，框架纷繁复杂，各显神通。然而，当我们想要在不同框架的项目中使用通用组件时，却往往被兼容性问题所困扰。例如，ElementUI 组件库提供了丰富的组件，但仅限于 React；Ant Design 的组件体系完善，却只兼容 Vue 和 React 框架。这迫使开发人员不得不为不同框架重复编写组件，不仅耗时费力，而且易致不一致性。

通用 Table 组件的诞生

为了打破框架限制，让开发人员在不同框架中也能轻松使用通用组件，我们推出了跨框架通用的 Table 组件。它不仅兼容 Vue、React 和 San 等主流框架，还易于使用和扩展。这款组件旨在为前端开发人员带来更多便利和自由。

代码实现：69 行代码搞定！

为了快速上手，我们以 Vue 框架为例演示通用 Table 组件的使用。首先，通过 npm 安装组件：

npm install @vueuse/table --save

安装完成后，在 Vue 组件中导入组件：

import { useTable } from '@vueuse/table'

接下来，就可以在组件中使用 Table 组件了：

const MyTable = {
  template: `
    <Table :data="data" :columns="columns" />
  `,
  setup() {
    const { data, columns } = useTable({
      data: [
        { name: 'John', age: 30 },
        { name: 'Jane', age: 25 },
        { name: 'Tom', age: 35 }
      ],
      columns: [
        { key: 'name', title: '姓名' },
        { key: 'age', title: '年龄' }
      ]
    })

    return { data, columns }
  }
}

在该组件中，我们用 Table 组件展示表格数据。Table 组件接受 data 和 columns 两个参数，其中 data 为表格数据，columns 为表格列定义。组件的 setup 函数用 useTable 函数初始化表格数据和列定义，并将其作为组件的 data 和 columns 属性传递给 Table 组件。

扩展组件：随心所欲，自由发挥！

通用 Table 组件不仅易于使用，还十分易于扩展。我们可以根据需求对组件进行各种定制，如修改样式、添加功能，甚至扩展新的组件类型。这里介绍几种常见的扩展方法：