antd分页组件table 支持slot 搜索条件

<template>
  <div class="data-table">
    <a-spin :spinning="spinning">
      <a-card :title="title" :bordered="false">
        <div class="search" v-if="$slots.search || $slots.searchmore">
          <!--  -->
          <a-form
            size="mini"
            class="dt-search-form-inline"
            layout="inline"
            :model="searchParams"
            @submit.prevent="search({ _fromBar: true, _begin: 0 })"
          >
            <div v-if="showmore">
              <div class="formSearchLittle">
                <slot name="search" />
              </div>
            </div>
            <div v-else>
              <div >
                <slot name="searchmore" />
              </div>
            </div>
          </a-form>
        </div>
        <div class="dt-toolbar" v-if="$slots.toolbar">
          <slot name="toolbar" />
        </div>
        <a-table
          :columns="columns"
          :data-source="dataSource"
          :pagination="false"
          :bordered="bordered"
          rowKey="id"
        >

        </a-table>
        <div class='pagination' v-if="pageable&&total>0">
          <span >显示第1至{{total}}项结果,共{{total}}条</span>
          <a-pagination
            v-model:current="current"
            v-model:pageSize="pageSize"
            :total="total"
            :showQuickJumper="true"
            @change="onChange"
          >
          </a-pagination>
        </div>
      </a-card>
    </a-spin>
  </div>
</template>
<script>
import { defineComponent, ref, watch } from "vue";
import { Form } from "ant-design-vue";
export default defineComponent({
  name: "data-table",
  props: {
    //是否显示边框
    bordered: {
      type: Boolean,
      default: false,
    },
    // 请求的返回渲染参数
    resultKey: {
      type: String,
      default: "data",
    },
    // 行
    columns: Array,
    //请求地址
    serverId: { type: Function, default: function () {} },
    //搜索请求
    searchParams: {
      type: Object,
      default: () => ({}),
    },
    title: String,
    // 是否显示分页
    pageable: {
      type: Boolean,
      default: true,
    },
  },
  setup(props, context) {
    const dataSource = ref([
	]);
    const { resetFields } = Form.useForm(props.searchParams, {});
    const spinning = ref(false);
    const pageSize = ref(10);
    const current = ref(1);
    const total = ref(0);
    const onChange = (pageNumber) => {
      search();
    };

    const request = (param) => {
      return props.serverId(param);
    };
    // 页面搜索
    const search = (params = {}, fn = (rows) => rows) => {
      const { _begin } = params;
      if (_begin >= 0) {
        current.value = _begin + 1;
      }
      const defaultParams = {
        pageNo: current.value,
        pageSize: pageSize.value,
        ...props.searchParams,
      };
      spinning.value = true;
      return request(defaultParams)
        .then((res) => {
          let result = res.data;
          if (result.code === 200) {
            dataSource.value = result.data;
            total.value = result.total;
            current.pageNo = result.pageNo;
          }
        })
        .catch((err) => {
          console.log(err);
        })
        .finally(() => {
          spinning.value = false;
        });
    };

    //展开与收起
    const showmore = ref(true);
    const toogleShow = () => {
      showmore.value = !showmore.value;
    };
    watch(pageSize, () => {
      search();
    });
    return {
      dataSource,
      onChange,
      total,
      pageSize,
      request,
      current,
      search,
      spinning,
      resetFields,
      showmore,
      toogleShow,
    };
  },
});
</script>
<style lang="less" scoped>
.search {
  margin-bottom: 16px;
}
.pagination {
  margin-top: 6px;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}
</style>