vue3 element-plus table 搜索 前端分页 前端排序

前端单个页面排序 主要代码

 <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+