canteen_system/src/components/tablePro/demos/NoPageTable.vue

66 lines
1.5 KiB
Vue

<template>
<TablePro ref="tableRef" :request-api="reqApi" :search-form-options="searchFormOptions" :columns="columns" :isPageTable="false" :pagination="pa" :remote="false">
<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) => {
const pa = {
params: params,
page: {
current: 1,
size: 100,
},
}
return api.post('/common/pager', pa)
}
const pa = reactive({
page: 1,
pageSize: 10,
onUpdatePage: (n: number) => {
pa.page = n
},
onUpdatePageSize: (s: number) => {
pa.pageSize = s
},
})
const searchFormOptions = reactive<TableType['searchFormOptions']>({
projectName: {
type: 'input',
label: '名字',
},
})
const columns = ref<TableType['columns']>([
{
type: 'selection',
},
{
key: 'name',
title: '名字',
},
{
key: 'address',
title: '地址',
},
])
</script>
<style scoped></style>