vue3+antd的table小组件

antdtable组件支持增加搜索栏配置。增加按钮等操作。

闲话少叙，上代码

<!-- 更多与收起详见用户管理页面 -->
<template>
  <div class="c-data-table">
    <a-spin :spinning="spinning">
      <a-card :title="title" :bordered="false">
        <div class="dt-search" v-if="$slots.search || $slots.searchmore">
          <!--  -->
          <a-form
            ref="searchform"
            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 class="">
                <slot name="searchmore" />
              </div>
            </div>
            <button type="submit" style="display: none;"></button>
          </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>
        <a-config-provider :locale="locale" v-if="pageable">
          <a-pagination
            show-size-changer
            v-model:current="current"
            v-model:pageSize="pageSize"
            :total="total"
            :showQuickJumper="true"
            @showSizeChange="onShowSizeChange"
            @change="onChange"
          >
          </a-pagination>
        </a-config-provider>
      </a-card>
    </a-spin>
  </div>
</template>
<script>
import {
    defineComponent, ref, watch, getCurrentInstance } from "vue";
import zhCN from "ant-design-vue/lib/locale-provider/zh_CN";
import {
    message } from "ant-design-vue";
import {
    useForm } from "@ant-design-vue/use";
export default defineComponent({
   
  name: "c-data-table",
  props: {
   
    //是否显示边框
    bordered: {
   
      type: Boolean,
      default: false,
    },
    // 请求的返回渲染参数
    resultKey: {
   
      type: String,
      default: "data",
    },
    // 行
    columns: Array,
    //请求地址
    serverId: String,
    //搜索请求
    searchParams: {
   
      type: Object,
      default: () => ({
   }),
    },
    title: String,
    // 是否显示分页
    pageable: {
   
      type: Boolean,
      default: true,
    },
  },
  setup() {
   
    let {
    proxy } = getCurrentInstance();
    const dataSource = ref([]);
    // const searchParams = reactive({ name: "" });
    const {
    resetFields } = useForm(proxy.$props.searchParams, {
   });
    const spinning = ref(false);
    const pageSize = ref(20);
    const current = ref(1);
    const total = ref(0);
    const onShowSizeChange = (current, pageSize) => {
   
      console.log(current, pageSize);
    };
    const onChange = (pageNumber) => {
   
      console.log("Page: ", pageNumber);
      search();
    };

    // 页面搜索
    const search = (params = {
   }, fn = (rows) => rows) => {
   
      const {
    _begin } = params;
      console.log(proxy, fn);
      if (_begin >