|
|
@ -26,7 +26,7 @@ |
|
|
|
</tr> |
|
|
|
</thead> |
|
|
|
<tbody> |
|
|
|
<tr v-for="(item, index) in currentData" :key="index" :class="{ |
|
|
|
<tr v-for="(item, index) in tableData" :key="index" :class="{ |
|
|
|
'odd-row': index % 2 !== 0, |
|
|
|
'even-row': index % 2 === 0, |
|
|
|
}"> |
|
|
@ -57,7 +57,7 @@ |
|
|
|
:class="{ active: page === currentPage }"> |
|
|
|
{{ page === '...' ? '...' : page }} |
|
|
|
</button> |
|
|
|
<button @click="nextPage" :disabled="currentPage === totalPages"> |
|
|
|
<button @click="nextPage" :disabled="currentPage === totalPage"> |
|
|
|
下一页 |
|
|
|
</button> |
|
|
|
</div> |
|
|
@ -100,6 +100,8 @@ const props = defineProps({ |
|
|
|
const emit = defineEmits(['update:modelValue']) |
|
|
|
const pageSizeList:number[] = [5,10,20] |
|
|
|
const visible = ref(props.modelValue) |
|
|
|
//总条数 |
|
|
|
let totalPage = ref(0) |
|
|
|
watch( |
|
|
|
() => props.modelValue, |
|
|
|
(newVal) => { |
|
|
@ -129,6 +131,7 @@ const cancelDelete = () => { |
|
|
|
} |
|
|
|
|
|
|
|
// 获取 id 卡信息 |
|
|
|
|
|
|
|
const getCardList = async () => { |
|
|
|
const params = { |
|
|
|
pageNum: currentPage.value, |
|
|
@ -140,13 +143,21 @@ const getCardList = async () => { |
|
|
|
} |
|
|
|
tableData.value = res.data.list |
|
|
|
totalItems.value = res.data.list.length |
|
|
|
totalPage.value = res.data.totalPage; |
|
|
|
console.log('tableData.value===', tableData.value) |
|
|
|
} |
|
|
|
|
|
|
|
// 初始化获取信息 |
|
|
|
onMounted(() => { |
|
|
|
getCardList() |
|
|
|
}) |
|
|
|
const handleCancel = () => emit('update:modelValue', false) |
|
|
|
const handleCancel = () => { |
|
|
|
currentPage.value = 1 |
|
|
|
tableData.value = [] |
|
|
|
totalPage.value = 0 |
|
|
|
totalItems.value = 0 |
|
|
|
emit('update:modelValue', false) |
|
|
|
} |
|
|
|
|
|
|
|
// 确认操作时输出已选中的项目 |
|
|
|
const handleConfirm = () => { |
|
|
@ -168,17 +179,18 @@ const prevPage = () => { |
|
|
|
if (currentPage.value > 1) currentPage.value-- |
|
|
|
} |
|
|
|
const nextPage = () => { |
|
|
|
if (currentPage.value < totalPages.value) currentPage.value++ |
|
|
|
if (currentPage.value < totalPage.value) currentPage.value++ |
|
|
|
|
|
|
|
} |
|
|
|
const goToPage = (page: any) => { |
|
|
|
if (page !== '...') currentPage.value = page |
|
|
|
} |
|
|
|
|
|
|
|
const formatDate = (date: any) => new Date(date).toLocaleDateString() |
|
|
|
const currentData = computed(() => { |
|
|
|
const start = (currentPage.value - 1) * pageSize.value |
|
|
|
return tableData.value.slice(start, start + pageSize.value) |
|
|
|
}) |
|
|
|
// const currentData = computed(() => { |
|
|
|
// const start = (currentPage.value - 1) * pageSize.value |
|
|
|
// return tableData.value.slice(start, start + pageSize.value) |
|
|
|
// }) |
|
|
|
|
|
|
|
// 显示的页码按钮逻辑 |
|
|
|
const displayedPages = computed(() => { |
|
|
@ -202,7 +214,7 @@ const displayedPages = computed(() => { |
|
|
|
// 切换全选状态 |
|
|
|
const toggleSelectAll = () => { |
|
|
|
if (selectAll.value) { |
|
|
|
selectedItems.value = [...currentData.value] |
|
|
|
selectedItems.value = [...tableData.value] |
|
|
|
} else { |
|
|
|
selectedItems.value = [] |
|
|
|
} |
|
|
@ -210,7 +222,13 @@ const toggleSelectAll = () => { |
|
|
|
|
|
|
|
// 监听选中项的变化,更新全选状态 |
|
|
|
watch(selectedItems, (newSelection) => { |
|
|
|
selectAll.value = newSelection.length === currentData.value.length |
|
|
|
selectAll.value = newSelection.length === tableData.value.length |
|
|
|
}) |
|
|
|
|
|
|
|
//监听页数变化 |
|
|
|
watch(currentPage, ()=>{ |
|
|
|
console.log('currentPage---', currentPage) |
|
|
|
getCardList() |
|
|
|
}) |
|
|
|
|
|
|
|
// 处理页大小变化 |
|
|
|