前端单个页面排序 主要代码
<el-table :data="currentTableData" :default-sort="{ prop: 'id', order: 'descending' }" style="width: 100%">
某列关键字搜索
在table内插入
<template #header>
<el-input v-model="search" size="small" placeholder="请输入" />
</template>
<script setup> 部分
const search = ref('')
const filterTableData = computed(() =>
tableData.value.filter(
(data) =>
!search.value ||
data.title.toLowerCase().includes(search?.value.toLowerCase())
)
)
前端处理数据分页
放在table元素下面
<el-pagination class="pagination" small background layout="prev, pager, next" :total="totalItems"
v-model:current-page="currentPage" @current-change="handelCurrentChange" :hide-on-single-page="paginationShow"
style="margin-top: 20px;" />
<script setup> 的部分
watch(filterTableData, (newVal, oldVal) => {
currentPage.value = 1
totalItems.value = tableData.value.length
currentTableData.value = filterTableData.value.filter((item, index) => index < pageSize)
// paginationShow.value = tableData.value.length > 10 ? true : false
})
const handelCurrentChange = page => {
currentPage.value = page
// currentPage.value = 1
const index = pageSize * (page - 1)
const nums = pageSize * page
const tables = []
for (let i = index; i < nums; i+