行业知识
前端element-plus表格分页
2026-11-15 07:14:31
来源：互联网转载
element-plus 前端表格分页
实现思路：
1.定义三个变量
tableData：存储所有表格数据
transferData：存储筛选操作之后的数据
tableShowData：存储当前页需要展示的数据
2.获取每页数据(transferData=>tableShowData)
for ( let i = (currentPage4.value - 1) * pageSize4.value; iconst tableShowData = computed({ get() { return transferData.value.slice( (currentPage4.value - 1) * pageSize4.value, currentPage4.value * ppageSize4.value ); }, set(value) {},});3.添加表格可能用到的筛选，排序，多选等功能。
1.筛选：添加@filter-change="handleFilterChange"方法。
handleFilterChange(filter);
const fliterHandLerData: any = ref([]);//保存筛选后的数据 let emitObj: any = {};//保存筛选条件 emitObj = _.cloneDeep(filter);//获取筛选条件（filter函数参数） if (emitObj[Object.keys(emitObj)[0]].length > 0) {//判断是否需要进行筛选 for (let item in emitObj) {//循环筛选条件 tableData.value.forEach((oitem) => {//循环原始数据每条数据 if (emitObj[item].includes(oitem[item])) {//判断指定字段这时候符合条件 fliterHandLerData.value.push(oitem);//附和则保存该条数据 } }); } transferData.value = fliterHandLerData.value;//将所有符合条件的数据存放到筛选后的变量中 } else {//没有筛选或者点击重置的时候直接赋值筛选变量所有数据 transferData.value = tableData.value; }2.排序 @sort-change="sortChange"
sortChange = ({ column, prop, order }) =>{}
if (order == "ascending") { //升序 transferData.value.sort((a: any, b: any) => { return a[prop] - b[prop]; }); } else if (order == "descending") { //降序 transferData.value.sort((a: any, b: any) => { return b[prop] - a[prop]; }); }3.全选通过toggleRowSelection，toggleAllSelection，clearSelection完成全选，清楚全选，选中某条数据操作。
4.完整代码示例
import { ref } from "vue";// 保存所有数据const tableData = [ { date: "1", name: "Tom", address: "2021-10-12", }, { date: "2", name: "Tom", address: "2021-10-15", }, { date: "4", name: "Tom", address: "2021-10-14", }, { date: "3", name: "Tom", address: "2021-10-10", }, { date: "5", name: "Tom", address: "2021-10-1", }, { date: "9", name: "cad", address: "2021-10-1", }, { date: "7", name: "Tom", address: "2021-10-1", }, { date: "6", name: "Tom", address: "2021-10-1", }, { date: "10", name: "Tom", address: "2021-10-1", }, { date: "8", name: "Tom", address: "2021-10-1", }, { date: "14", name: "cad", address: "2021-10-1", }, { date: "11", name: "Tom", address: "2021-10-1", }, { date: "15", name: "Tom", address: "2021-10-1", }, { date: "12", name: "Tom", address: "2021-10-1", }, { date: "17", name: "Tom", address: "2021-10-1", }, { date: "21", name: "Tom", address: "2021-10-1", }, { date: "16", name: "cad", address: "2021-10-1", }, { date: "13", name: "Tom", address: "2021-10-1", }, { date: "20", name: "cad", address: "2021-10-1", }, { date: "19", name: "Tom", address: "2021-10-1", }, { date: "18", name: "Tom", address: "2021-11-12", }, { date: "24", name: "Tom", address: "2021-11-12", }, { date: "23", name: "cad", address: "2021-11-12", }, { date: "22", name: "cad", address: "2021-11-12", }, { date: "28", name: "cad", address: "2021-11-12", }, { date: "27", name: "Tom", address: "2021-11-12", }, { date: "26", name: "cad", address: "2021-11-12", }, { date: "25", name: "cad", address: "2021-11-12", }, { date: "32", name: "Tom", address: "2021-11-12", }, { date: "31", name: "kmi", address: "2021-11-12", }, { date: "30", name: "Tom", address: "2021-11-12", }, { date: "34", name: "kmi", address: "2021-11-12", }, { date: "33", name: "kmi", address: "2021-11-12", }, { date: "29", name: "Tom", address: "2021-11-12", }, { date: "35", name: "Tom", address: "2021-11-12", }, { date: "36", name: "kmi", address: "2021-11-12", }, { date: "37", name: "Tom", address: "2021-11-12", }, { date: "38", name: "Tom", address: "2021-11-12", }, { date: "39", name: "kmi", address: "2021-11-12", }, { date: "40", name: "Tom", address: "2021-11-12", }, { date: "41", name: "Bob", address: "2021-11-12", }, { date: "42", name: "Tom", address: "2021-11-12", }, { date: "43", name: "Tom", address: "2021-11-12", }, { date: "44", name: "Tom", address: "2021-11-12", }, { date: "45", name: "Tom", address: "2021-11-12", }, { date: "46", name: "Bob", address: "2021-11-12", }, { date: "47", name: "Tom", address: "2021-11-12", }, { date: "48", name: "Tom", address: "2021-11-12", }, { date: "49", name: "Bob", address: "2021-11-12", }, { date: "50", name: "Tom", address: "2021-11-12", }, { date: "51", name: "Bob", address: "2021-11-12", }, { date: "52", name: "Tom", address: "2021-11-12", },];// 保存中间处理后的数据const transferData: any = ref([]);// 保存需要展示的单页数据const tableShowData: any = ref([]);const currentPage4 = ref(1); //页数const pageSize4 = ref(5); //每页数据条数const small = ref(false);const background = ref(false);const disabled = ref(false);const search = ref(null);const total = ref(tableData.length);const handleSizeChange = (val: number) => { getData();};const getData = () => { tableShowData.value = []; for ( let i = (currentPage4.value - 1) * pageSize4.value; i { getData(); if (order == "ascending") { //升序 tableShowData.value.sort((a: any, b: any) => { return a[prop] - b[prop]; }); } else if (order == "descending") { //降序 tableShowData.value.sort((a: any, b: any) => { return b[prop] - a[prop]; }); }};const inputBlur = () => { transferData.value = []; if (!search.value) { transferData.value = tableData; total.value = transferData.value.length; return; } tableData.forEach((item) => { if (item.name == search.value) { transferData.value.push(item); } }); total.value = transferData.value.length; getData();};const handleCurrentChange = (val: number) => { getData();};const handleSelectionChange = (val: any) => { console.log("多选val", val);};const filters = ref([ { text: "Tom", value: "Tom", }, { text: "cad", value: "cad", }, { text: "kmi", value: "kmi", }, { text: "Bob", value: "Bob", },]);// 组件提供筛选方式，只筛选当前展示数据中是否具有满足条件的数据const filterHandler = (value: string, row: any, column: any) => { const property = column["property"]; return row[property] === value;};onMounted(() => { transferData.value = tableData; for ( let i = (currentPage4.value - 1) * pageSize4.value; i
