Vben 表格

关于 reloadWithCallback

新版本 antdv4 已经没有这个问题, 也已经移除 可以跳过

除了 reload 函数 还有一个函数reloadWithCallback 该函数非官方提供 主要解决问题为使用 modal 时直接 emit reload 关闭页面会关闭两次

会有关闭两次动画 直接调用 reload 时

// table.vue
<ClientModal @register="registerModal" @reload="reload" />

<script lang="ts">
const [registerTable, { reload, reloadWithCallback }] = useTable(); // modal
closeModal();
emit("reload");
</script>

使用 reloadWithCallback 将 reload 放在回调函数中执行 只会有一次关闭动画

<ClientModal @register="registerModal" @reload="reloadWithCallback" />

<script lang="ts">
const [registerTable, { reload, reloadWithCallback }] = useTable();
// modal
emit("reload", closeModal);
</script>

默认排序

默认实现也是按照后台 PageQuery 的根据字段和正反序来排序, 可以不做修改

defaultSortFn: (sortInfo: SorterResult) => {
  const { field, order } = sortInfo;
  if (field && order) {
    return {
      // 根据哪个字段排序
      orderByColumn: field,
      // 排序方式
      isAsc: 'ascend' === order ? 'asc' : 'desc',
    };
  } else {
    return {};
  }
},

而表格需要排序的 column 只需要添加一行代码即可完成排序功能(相关列会出现排序按钮)

{
  title: '操作日期',
  dataIndex: 'operTime',
  sorter: true, // 添加这个即可排序
},