66 lines
1.5 KiB
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>
|