前端element-plus表格分页

最新推荐文章于 2024-01-19 15:52:50 发布
最新推荐文章于 2024-01-19 15:52:50 发布
阅读量809 收藏 8
点赞数 11
文章标签： 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/follow12138/article/details/135199369
版权

element-plus 前端表格分页

实现思路：

1.定义三个变量

        tableData：存储所有表格数据

        transferData：存储筛选操作之后的数据

        tableShowData：存储当前页需要展示的数据

2.获取每页数据(transferData=>tableShowData)

for (
    let i = (currentPage4.value - 1) * pageSize4.value;
    i < currentPage4.value * pageSize4.value;
    i++
  ) {
    if (transferData.value[i]) {
      tableShowData.value.push(transferData.value[i]);
    }
  }
const 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.完整代码示例

<template>
  <el-input v-model="search" @blur="inputBlur"></el-input>
  <el-table
    :data="tableShowData"
    border
    style="width: 100%"
    @sort-change="sortChange"
    @selection-change="handleSelectionChange"
  >
    <el-table-column type="selection" width="55" />
    <el-table-column prop="date" label="Date" width="180" sortable="custom" />
    <el-table-column
      prop="name"
      label="Name"
      width="180"
      :filters="filters"
      :filter-method="filterHandler"
    />
    <el-table-column prop="address" label="Address" sortable="custom" />
  </el-table>
  <el-pagination
    v-model:current-page="currentPage4"
    v-model:page-size="pageSize4"
    :page-sizes="[5, 10, 15, 20]"
    :small="small"
    :disabled="disabled"
    :background="background"
    layout="total, sizes, prev, pager, next, jumper"
    :total="total"
    @size-change="handleSizeChange"
    @current-change="handleCurrentChange"
  />
</template>

<script lang="ts" setup>
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 < currentPage4.value * pageSize4.value;
    i++
  ) {
    if (transferData.value[i]) {
      tableShowData.value.push(transferData.value[i]);
    }
  }
};
const sortChange = ({ column, prop, order }) => {
  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 < currentPage4.value * pageSize4.value;
    i++
  ) {
    tableShowData.value.push(transferData.value[i]);
  }
});

</script>
<style scoped lang="less">
.box {
  width: 300px;
}
.pieChart {
  width: 400px;
  height: 400px;
}
</style>

follow12138
关注
  • 11
    点赞
  • 踩
  • 8
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Vue2+element-plus 表格el-table前端分页、排序、搜索与加序号
鹤渺的星球
09-19 8118
虽然很多时候后端会把分页，搜索，排序都做好，但是有些返回数据并不多的页面，或者其他原因不能后端分页的通常会前端处理，而前端分页一般会涉及：表格数据的搜索，表格分页，排序，有些需要加一列序号。
Vue+ElementUI table实现表格分页
12-13
Vue+ElementUI table表格分页，供大家参考，具体内容如下 分页的两种方式。前端分页，后端分页。两种方式各有个的优缺点吧。 前端分页：后台只需将数据返回，不需要做过多处理，前端一次请求拿到所有数据后做分页处理。但数据量不能太大，因为前端是先一次性加载所有数据，然后在做分页处理。在数据量多的情况下，加载相对应的会变慢。所有在前端做分页时要先考虑一下后期的数据量。 后端分页：因为是后端分页，前端在每点击一次分页时，便向后台请求一次数据。其实就是避免前端一次性从数据库获取大量数据 一、在elementUI中将表格、分页引入自己的页面中 <div class="
vue3+elementPlus+js封装常规的table表格加分页组件
m0_72270036的博客
07-13 1263
【代码】vue3+elementPlus+js封装常规的table表格加分页组件。
element-plus表格前端实现分页效果
虎康的博客
01-19 575
对表格中的数据进行本地分页，不调用接口。
element-plus表格分页实现
qq_57076435的博客
08-14 1012
current-change：点击分页触发的事件，重新获取数据。使用element-plus的分页组件。page-size：每页显示条目个数。current-page：当前页数。total:总的数据条数。
element-plus table 表格 及 分页
qq_52229892的博客
05-08 2443
1.引入element-plus组件库（按需引入或全局引入）3.涉及到判断以后再填数据，就用到插槽，与三元运算。这是我自己看的，封装接口，调接口。接口的数据及数据类型。
Vue之element-plus实现分页功能
qq_68575975的博客
09-08 1万+
total: 总页数 （这里我设置的每页显示9条数据，就用 总数据数+1/9 ，当然你想要每页显示10条或11条就改一下除数就可以）第一页效果不需要进行计算，可以无限滑动。curretnPage：当前页。第一页以后，最后一页之前。
Vue3+ElementPlus纯前端分页（手撕分页），无需修改后端
weixin_46407807的博客
11-19 1352
3.中的数据由原本的tableData更换为分页处理后的:paginatedData。4.紧接着标签下面加上el-pagination。2.如果有查询的，调用查询后重置页码。1、在script中加上。
element-plus-2.2.12 本地资源文件
08-01
element-plus-2.2.12 本地资源文件，适用于Vue 3编程，是流行的Vue 3的组件库。 资源适用于离线开发，内网使用。 （本资源为 element-plus-2.2.12 保存而来，如有侵权请联系我删除。）
element-plus(element[email protected]) 本地离线资源
最新发布
02-05
element[email protected] 本地离线资源，适用于没有网络连接、搭建自己的cdn等用途。 All files（包含文件） /npm/element[email protected]/dist /npm/element[email protected]/es /npm/element[email protected]/lib /npm/element-...
vue+elementUI组件table实现前端分页功能
10-15
主要为大家详细介绍了vue+elementUI组件table实现前端分页功能，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
elementPlus.docx
03-05
elementPlus离线开发文档
Element_Plus 分页组件 内部样式修改（较详细）
08-11
前后端分离项目
Vue3+element-plus-table-dragable(Sortable.js)实现表格拖动排序
06-15
重用现有element-plus组件库。对于小白来说怎么在Vuedraggable里使用element组件提供了实际应用参考。table样式完全模拟了el-table组件样式。看官方文档两天也不如直接看一个完整的实例。 需要安装依赖：npm i -S ...
element-plus离线文档
05-07
element-plus离线文档，node服务已经配置好，直接node server.js即可使用，可以在内网部署，已经部署成功。
vue3-element-admin：vue3 + element-plus + typescript 后台管理系统
05-04
vue3-element-admin 是【有来开源组织】基于 Vue3 + Vite4 + TypeScript + Element-Plus + Pinia 等前端主流技术栈从0到1搭建后台管理系统模板（前后端开源）。 后端是基于 Spring Boot 3.0 、Spring Security 6.0 ...
教程11 Vue3 + Django前后端分离项目——Element Plus Table 表格（数据增、删、改、除、分页）
boxuestudio的博客
09-25 2234
【代码】教程11 Vue3 + Django前后端分离项目——Element Plus Table 表格（数据增、删、改、除、分页）
vue3+element Plus实现表格前端分页
Xwf1023的博客
09-20 7466
vue3+elementUI Plus实现表格前端分页
Vue3+Element-Plus 实现表单中数据分页的效果 三三
热门推荐
码侬人生
12-23 1万+
最终效果： 1. 使用的组件 Pagination 分页组件 <el-pagination v-model:currentPage="currentPage4" :page-sizes="[100, 200, 300, 400]" :page-size="100" layout="total, sizes, prev, pager, next, jumper" :total="400" @size-change="handleSizeChange" @current..
vue3 element-plus表格分页 示例
04-13
可以的，以下是一个使用 Vue3 和 Element Plus 实现表格分页的示例： ``` <template> <div class="table-container"> <el-table :data="tableData" :page-size="pageSize" :current-page="currentPage" @current-change="handleCurrentChange"> <el-table-column prop="id" label="ID"></el-table-column> <el-table-column prop="name" label="Name"></el-table-column> <el-table-column prop="address" label="Address"></el-table-column> </el-table> <el-pagination :page-size="pageSize" :total="total" :current-page.sync="currentPage"></el-pagination> </div> </template> <script> import { ref } from 'vue' import { getTableData } from '@/api/table' export default { setup() { const tableData = ref([]) const currentPage = ref(1) const pageSize = ref(10) const total = ref(0) const fetchData = async () => { const { data } = await getTableData(currentPage.value, pageSize.value) tableData.value = data.list total.value = data.total } const handleCurrentChange = (page) => { currentPage.value = page fetchData() } fetchData() return { tableData, currentPage, pageSize, total, handleCurrentChange } } } </script> <style scoped> .table-container { margin: 20px; } </style> ``` 这个示例使用了 `el-table` 和 `el-pagination` 组件来实现表格和分页功能。我们通过 `ref` 创建了响应式变量 `tableData`、`currentPage`、`pageSize` 和 `total`。在 `setup` 函数中，我们定义了一个 `fetchData` 函数来获取表格数据，然后在组件初始化时调用该函数。我们还定义了一个 `handleCurrentChange` 函数来处理分页组件的页码变化事件。在模板中，我们使用了这些变量和函数来渲染表格和分页组件。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值