menduner/src/views/dataService/newlyAppointed/table.vue

<template>
	<v-card class="pa-3" elevation="5">
		<CtForm ref="CtFormRef" :items="formItems" class="mt-3">
			<template #formBtn>
				<v-btn color="primary" class="elevation-5" @click.stop="handleSearch">搜 索</v-btn>
				<v-btn variant="outlined" color="primary" class="elevation-5 ml-3" @click.stop="handleReset">重 置</v-btn>
			</template>
		</CtForm>
	</v-card>

	<v-card class="mt-3" elevation="5">
		<CtTable
			:items="items"
			class="pa-3"
			:headers="headers"
			:loading="false"
			:elevation="0"
			:isTools="false"
			:showPage="true"
			:total="total"
			:page-info="query"
			itemKey="id"
			@pageHandleChange="handleChangePage"
		>
			<template #actions="{ item }">
				<v-btn variant="text" color="primary" @click.stop="handleDetail(item)">详 情</v-btn>
			</template>
		</CtTable>
	</v-card>

	<v-navigation-drawer v-model="showDetail" absolute location="left" rounded temporary width="500" class="pa-5">
		详情
	</v-navigation-drawer>
</template>

<script setup>
defineOptions({ name: 'newlyAppointedTable'})
import { ref } from 'vue'

const total = ref(0)
const query = ref({
  pageSize: 10,
	pageNo: 1
})
const items = ref([
	{ id: 1, name: '张三', area: '北京', hotel: '北京王府半岛酒店' },
	{ id: 2, name: '李四', area: '上海', hotel: '上海外滩茂悦大酒店' },
	{ id: 3, name: '王五', area: '广州', hotel: '广州富力丽思卡尔顿酒店' },
])
const headers = [
	{ title: '姓名', key: 'name', sortable: false },
  { title: '地区', key: 'area', sortable: false },
  { title: '酒店', key: 'hotel', sortable: false },
  { title: '操作', key: 'actions', sortable: false, align: 'center' }
]
const CtFormRef = ref()
const formItems = ref({
  options: [
		{
      type: 'text',
      key: 'name',
      value: '',
      label: '姓名',
			hideDetails: true,
			col: 3
    },
		{
      type: 'text',
      key: 'area',
      value: '',
      label: '地区',
			hideDetails: true,
			flexStyle: 'mx-3',
			col: 3
    },
		{
      type: 'text',
      key: 'hotel',
      value: '',
      label: '酒店',
			hideDetails: true,
			col: 3
    },
		{
			slotName: 'formBtn',
			col: 3,
			flexStyle: 'ml-3'
		}
  ]
})

const handleChangePage = (e) => {
	query.value.pageNo = e
}

const handleSearch = () => {}
const handleReset = () => {}

const showDetail = ref(false)
const handleDetail = (item) => {
	console.log(item, 'detail')
	showDetail.value = true
}
</script>

<style scoped lang="scss">

</style>