Vue3+elementplus含筛选分页实现

Vue3+elementplus含筛选分页实现

描述：表格得到的数据进行筛选排序后再进行展示，所以需要查的内容全部查询出来后进行筛选或排序再进行展示。这里的操作记录我使用的方法，能够实现筛选后的展示情况。

效果：进行整体时间排序，前端，最好是从接口一次性查询出所有数据

1、调用elementplus的组件

<div class="gva-pagination">
  <el-pagination
    :current-page="page"
    :page-size="pageSize"
    :page-sizes="[10, 30, 50, 100]"
    :total="total"
    layout="total, sizes, prev, pager, next, jumper"
    @current-change="handleCurrentChange"
    @size-change="handleSizeChange"
  />
</div>

2、实现分页函数

// 分页函数
const page = ref(1)
const total = ref(0)
const pageSize = ref(10)
const tableData = ref()
const tableDataSlice = ref([])

const handleSizeChange = (val) => {
  pageSize.value = val
  if (val * page.value > total.value) {
    tableDataSlice.value = tableData.value.slice((page.value - 1) * pageSize.value, total.value)
  } else {
    tableDataSlice.value = tableData.value.slice((page.value - 1) * pageSize.value, (page.value - 1) * pageSize.value + pageSize.value)
  }
}

const handleCurrentChange = (val) => {
  page.value = val
  if (val * pageSize.value > total.value) {
    tableDataSlice.value = tableData.value.slice((val - 1) * pageSize.value, total.value)
  } else {
    tableDataSlice.value = tableData.value.slice((val - 1) * pageSize.value, (val - 1) * pageSize.value + pageSize.value)
  }
}

3、data数据绑定为tableDataSlice

<el-table
      :data="tableDataSlice"
    >
      <el-table-column
        align="center"
        label="日期"
        min-width="150"
        prop="date"
      >
</el-table>

4、在获取数据函数内最后添加首页10行展示

const getTableData = async() => {
    // 进行筛选功能实现，比如时间排序后展示
    ...
    tableData.value.sort(function(a, b) {
    	return new Date(b.date).getTime() - new Date(a.date).getTime()
    })
    ...
    // 添加
    if (tableDataSlice.value.length === 0) {
        tableDataSlice.value = tableData.value.slice(0, pageSize.value)
      }
}