VUE3的Vben的TABLE的列表的使用

列表参考的文档有2个, Vben里的FORM + TABLE
TABLE里面通过配置,可以自带有搜索和列表和分页, 以用户列表为例, 先贴上template端的代码

<template>
  <div>
    <BasicTable
      title="列表测试-副标题"
      ref="tableRef"
      @register="registerTable"
      :searchInfo="searchInfo"
    >
      <template #toolbar>
        <a-button type="primary" @click="handleEdit"> 新增用户 </a-button>
      </template>
      <template #bodyCell="{ column, record }">
        <template v-if="column.key === 'action'">
          <TableAction :actions="createActions(record)" />
        </template>
      </template>
    </BasicTable>
    <test1Modal @register="register1" @success="handleSuccess" />
    <test2Modal @register="register2" @success="handleSuccess" />
  </div>
</template>

BasicTable是TABLE的一个组件, registerTable用于注册 useTable，如果需要使用useTable提供的 api，必须将 registerTable 传入组件的 onRegister, 以下代码是完成注册的方式:

    const [registerTable] = useTable({
    api: accountListsApi, //接口api
    columns: columns, //列数组,渲染table的列表
    showIndexColumn: false, //是否显示序号列
    actionColumn: {
      //表格右侧操作列配置 BasicColumn
      width: 160,
      title: '操作',
      dataIndex: 'action',
      // slots: { customRender: 'action' },
    },
    formConfig: {
      //表单配置，参考表单组件的 Props
      labelWidth: 120,
      schemas: searchFormSchema,
      autoSubmitOnEnter: true,
    },
    handleSearchInfoFn(info) {
      //开启表单后，在请求之前处理搜索条件参数
      console.log('handleSearchInfoFn', info);
      return info;
    },
    useSearchForm: true, //使用搜索表单
    scroll: { y: '100%' },
    pagination: true, //分页信息配置，为 false 不显示分页	
  });

通过tableRef的方式拿到TABLE的对象, 然后才可以使用METHODS里面的方法
把代码贴出来

  const tableRef = ref<Nullable<TableActionType>>(null);
  function getTableAction() {
    const tableAction = unref(tableRef);
    if (!tableAction) {
      throw new Error('tableAction is null');
    }
    return tableAction;
  }
  //使用方法
  getTableAction().setTableData();