<template>
  <TablePro
    ref="tableRef"
    :request-api="reqApi"
    :search-form-options="searchFormOptions"
    :columns="columns"
  >
    <template #selectionExtra>
      <n-button
        size="small"
        text
        @click="logRows"
      >
        123
      </n-button>
    </template>
  </TablePro>
</template>
<script setup lang="tsx">
  import api from "@/axios";
  import type {
    TableProInst,
    TableProProps,
  } from "@/components/tablePro/src/interface";
  import TablePro from "@/components/tablePro/src/TablePro.vue";
  import { reactive, ref, useTemplateRef } from "vue";

  type TableType = TableProProps<any, any>;

  const tableRef = useTemplateRef<TableProInst>("tableRef");
  const logRows = () => {
    console.log(tableRef.value);
    console.log(tableRef.value?.selectRows);
    console.log(tableRef.value?.selectKeys);
  };
  const reqApi: TableType["requestApi"] = (params) => {
    return api.post("/common/pager", params);
  };
  const searchFormOptions = reactive<TableType["searchFormOptions"]>({
    projectName: {
      type: "input",
      label: "名字",
    },
  });

  const columns = ref<TableType["columns"]>([
    {
      key: "name",
      title: "菜单名字",
    },
  ]);
</script>
<style scoped></style>
