對比elment-ui 和vben 前端對錶格的封裝

看了這篇文章 優雅的使用 element-ui 中的 table 組件，突然頓悟了一些。

elment-ui的表格

<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>