对比elment-ui 和vben 前端对表格的封装

看了这篇文章 优雅的使用 element-ui 中的 table 组件，突然顿悟了一些。

elment-ui的表格

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14

<el-table :data="tableData">     <el-table-column       prop="date"       label="日期">     </el-table-column>     <el-table-column       prop="name"       label="姓名">     </el-table-column>     <el-table-column       prop="address"       label="地址">     </el-table-column>   </el-table>

vben 是封装了一个table，

tableColumns，searchFormSchema，createFormSchema，updateFormSchema 在typescript 文件里定义

     const [registerTable, { reload }] = useTable({
        columns: tableColumns,
        formConfig: {
          labelWidth: 70,
          schemas: searchFormSchema,
        },
        api: pageAsync,
        actionColumn: {
          width: 220,
          title: '操作',
          dataIndex: 'action',
          slots: { customRender: 'action' },
        },
      });

slot 占位符 单独定义内容

 <BasicTable @register="registerTable" size="small">
      <template #toolbar>
        <a-button
          preIcon="ant-design:plus-circle-outlined"
          type="primary"
          @click="openCreateProductModal"
        >
          新增产品
        </a-button>
      </template>

      <template #action="{ record }">
        <TableAction
          :actions="[
            {
              icon: 'clarity:note-edit-line',
              label: '编辑',
              tooltip: '编辑产品',
              onClick: handleEdit.bind(null, record),
            },
            {
              icon: 'ant-design:delete-outlined',
              color: 'error',
              label: '删除',
              tooltip: '删除产品',
              popConfirm: {
                title: '是否确认删除',
                placement: 'left',
                confirm: handleDelete.bind(null, record),
              },
            },
          ]"
        />
      </template>
    </BasicTable>