element-ui实现表格分页功能（el-pagination）

最新推荐文章于 2024-09-30 16:08:58 发布

Dax1_

最新推荐文章于 2024-09-30 16:08:58 发布

阅读量3k

点赞数 2

本文链接：https://blog.csdn.net/Dax1_/article/details/118990521

版权

本文介绍了一个使用Element UI构建的表格组件，展示了如何实现实时数据加载、排序和分页功能。通过JavaScript方法，实现数据的动态过滤和每页显示数量的调整，适合前端开发人员学习表格组件的交互和数据管理。

摘要由CSDN通过智能技术生成

html部分

	<el-table
      v-loading
      :data="tempList"
      border
      fit
      highlight-current-row
      style="width: 100%"
      stripe
      :header-cell-style="{ background: '#ededed' }"
    >
	<el-table-column
        prop="oilgunno"
        label="油枪号"
        min-width="65px"
        align="center"
      />
      <el-table-column
        prop="ttc"
        sortable
        label="流水号"
        min-width="70px"
        align="center"
      />
		
    <el-pagination
      :current-page="currentPage"
      :total="total"
      :page-sizes="[20, 50, 80]"
      :page-size="pageSize"
      background
      layout="prev, pager, next, sizes, total, jumper"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
    />

js部分

	data(){
		return{
		dataList:[], //表格源数据
		tempList: [], //表格显示数据
		currentPage: 1, //当前页
     	pageSize: 20, //每页行数
     	total: 0, //列表总行数
		}
	}
	methods: {
    //列表数据
    getData() {
      request({
        url: "http://XXXXXX",
        method: "get",
      }).then((res) => {
        this.dataList = res.data;
        this.tempList = res.data;
        this.total = res.data.length;
        this.handleCurrentChange(1);
      });
    },
    //分页
    // 每页条数切换
    handleSizeChange: function (pageSize) {
      this.pageSize = pageSize;
      this.handleCurrentChange(this.currentPage);
      this.handleCurrentChange(1);
    },
     //页码切换
    handleCurrentChange: function (currentPage) {
      this.currentPage = currentPage;
      this.currentChangePage(this.dataList, currentPage);
    },
     //分页方法
    currentChangePage(list, currentPage) {
      let from = (currentPage - 1) * this.pageSize;
      let to = currentPage * this.pageSize;
      this.tempList = [];
      for (; from < to; from++) {
        if (list[from]) {
          this.tempList.push(list[from]);
        }
      }
      console.log(this.tempList);
    }
  	}