ATableEx 扩展 Table

代码演示

基本用法

简化分页器的使用，只需传入loadData方法，分页时自动调用

<template>
    <a-table-ex ref="tableEx" :columns="columns" :loadData="loadData">
    </a-table-ex>
</template>

<script setup lang="ts">
import { ref, useTemplateRef, onMounted } from "vue";
const columns = ref([
  {
    title: "Name",
    dataIndex: "name",
  },
  {
    title: "Age",
    dataIndex: "age",
  },
  {
    title: "Address",
    dataIndex: "address",
  },
]);
function loadData(params1) {
  const params = {};
  Object.assign(params, params1);
  return Promise.resolve({
    code: 0,
    result: {
      totalCount: 30,
      data: [
        {
          name: "John Brown",
          age: 32,
          address: "New York No. 1 Lake Park",
        },
        {
          name: "Jim Green",
          age: 42,
          address: "London No. 1 Lake Park",
        },
        {
          name: "Joe Black",
          age: 32,
          address: "Sidney No. 1 Lake Park",
        },
      ],
    },
  });
}
const tableEx = useTemplateRef<any>("tableEx");
const handleQuery = () => {
  tableEx.value?.refresh();
};
onMounted(() => {
  handleQuery();
});
</script>

API

参数	说明	类型	默认值
loadData	分页加载方法	Function	-
formatSortParams	是否格式化排序参数(向 loadData 传入 xxxSortField:'asc'、'desc')	boolean	true