<DataTable :value="data" :size="'small'" tableStyle="min-width: 50rem">
  <template #empty>
    <div class="flex flex-col items-center">
      <div class="py-[32px]">
        <i class="pi pi-box text-[36px]"></i>
      </div>
      <div class="pb-[32px]">
        暂无数据
      </div>
    </div>
  </template>
  <Column header="文件类型">
    <template #body="slotProps">
      {{ slotProps.data.contentType }}
    </template>
  </Column>
  <Column field="ext" header="文件后缀" class="w-[100px]"></Column>
  <Column field="size" header="文件大小">
    <template #body="slotProps">
      {{ calcFileSize(slotProps.data.size) }}
    </template>
  </Column>
  <Column field="createdTime" header="上传时间" class="w-[190px]"></Column>
  <Column class="text-center" :frozen="true" header="操作" align-frozen="right">
    <template #body="{ data }">
      <SplitButton label="更多操作" :model="dataOpts(data)" size="small" severity="help"></SplitButton>
    </template>
  </Column>
</DataTable>
<Paginator :rows="pageParams.size" :totalRecords="total" @page="changePage" :alwaysShow="true" :rowsPerPageOptions="[10, 15, 20, 50, 100]">
  <template #start>
    共有 {{ total }} 条数据
  </template>
</Paginator>

const pageParams = ref({
  size: 10,
  current: 1,
  model: {}
})
const loading = ref(false);
const data = ref([]);
const total = ref(0);
const load = () => {
  // 从服务器加载数据
}

const changePage = (p) => {
  pageParams.value.size = p.rows
  pageParams.value.current = p.page + 1
  load()
}