VxeTable 组件

默认使用VxeTable的Grid配置式表格 强烈建议看文档, 特别详细

默认配置

路径: apps/web-antd/src/adapter/vxe-table.ts

可根据需要查看 vxe 文档进行默认配置更改

useVbenVxeGrid

useVbenVxeGrid是对 vxe-table 的封装 用法与 v2 的useTable类似

const [BasicTable, tableApi] = useVbenVxeGrid({
    表单配置项
    表格配置项
    表格事件
});

BasicTable可在模板中使用, tableApi 就是组件的 api 对象, 可以通过它来操作表格

其实, 也就是这种原始写法的封装, 只是换了一种写法

相较于 v2, 这种方式简单的多, 更容易上手

<template>
  <vxe-grid ref="tableApi" v-bind="gridOptions" v-on="event"></vxe-grid>
</template>

<script setup lang="ts">
// 表格api
const tableApi = ref(null);
// 表格配置项
const gridOptions = 配置项;
// 表格事件
const event = 事件;
</script>

插槽使用

表格头部左边插槽: toolbar-actions

表格头部右边插槽: toolbar-tools

<template>
  <BasicTable>
    <template #toolbar-actions> </template>
    <template #toolbar-tools> </template>
  </BasicTable>
</template>

表格列插槽

有两种使用方法: 模板插槽/tsx:

模板插槽

<template>
  <BasicTable>
    <template #插槽名="{ row }"> row为行数据 </template>
  </BasicTable>
</template>

<script setup lang="ts">
...
{
  field: 'test',
  slots: { default: '插槽名' },
  title: '列',
},
</script>

tsx 写法:

{
  field: 'test',
  slots: {
    default: ({ row }) => {
      return <div>row为行数据</div>;
    },
  },
  title: '列',
},

表格列排序

参考oss上传排序: 源码

关键代码

proxyConfig: {
  ajax: {
    // 解构的sort为排序信息
    query: async ({ page, sort }, formValues = {}) => {
      ...
      const params: any = {
        pageNum: page.currentPage,
        pageSize: page.pageSize,
        ...formValues,
      };
      // 按自己需求处理排序 这里可能为空对象即 {}
      if (!isEmpty(sort)) {
        params.orderByColumn = sort.field;
        params.isAsc = sort.order;
      }
      return await ossList(params);
    },
  },
},
// 开启远程排序功能
sortConfig: {
  remote: true,
},

const [BasicTable, tableApi] = useVbenVxeGrid({
  formOptions,
  gridOptions,
  gridEvents: {
    // 排序事件 这里为重新加载api
    sortChange: () => {
      tableApi.query();
    },
  },
});

需要操作查询表单

需要操作查询表单的情况可以使用:

const [BasicTable, tableApi] = useVbenVxeGrid({
  表单配置项
  表格配置项
  表格事件
});
// 表单api
tableApi.formApi.操作

具体表单 API 可参考 表单文档

自定义列(保存到本地)

通过表格右上角修改列排序后, 可以选择保存在 localStorage 中, 方便下次打开时还原 默认未开启 vxe 文档

核心配置:

id: 'id 全局不要重复',
customConfig: {
  storage: true
},

全局 & 代码生成已经默认配置了 id, 你只需要开关配置即可