vue+element를 사용하여 테이블 페이징을 구현하는 단계에 대한 자세한 설명

이번에는 vue+element로 테이블 페이지 매김을 구현하는 단계에 대해 자세히 설명하겠습니다. vue+element의 테이블 페이지 매김 구현을 위한 Notes는 무엇인가요?

머리말 ElementUI는 Ele.me의 오픈 소스인 Vue 기반 프런트 엔드 프레임워크로 그리드 시스템, 테이블, 양식, 트리 메뉴, 알림 등과 같은 일련의 기능 구성 요소를 캡슐화하는 데 도움이 되었습니다. 백엔드 관리 인터페이스에 관여하는 프로젝트, 특히 아래의 ie8 또는 ie9와 호환될 필요가 없는 프로젝트의 경우 ElementUI가 좋은 선택입니다.

게다가 ElementUI의 문서가 매우 자세하게 설명되어 있어 데모를 참고하면 빠르게 시작할 수 있습니다.

이 글은 주로 테이블 페이징과 프론트 엔드 검색을 구현하기 위한 Vue + 요소에 대한 관련 내용을 소개합니다. 모든 사람의 참고와 학습을 위해 공유됩니다. 아래에서는 자세히 설명하지 않겠습니다.

구현 아이디어 1. 프런트엔드와 백엔드 관리에 테이블이 너무 많으면 테이블에 데이터가 너무 많으면 페이징이 필요합니다.

2. 프런트엔드 상호작용이 검색할 때마다 서버에 요청하면 서버에 대한 부담이 커집니다. 따라서 데이터의 양이 크지 않으면 데이터를 한 번에 반환할 수 있으며 프런트엔드에서 해당 작업을 수행합니다. 검색

3. 아래에 데모를 붙여넣으세요

샘플 코드

<template>
<p>
 <el-input v-model="tableDataName" placeholder="请输入姓名" style="width:240px"></el-input>
 <el-button type="primary" @click="doFilter">搜索</el-button>
 <el-button type="primary" @click="openData">展示数据</el-button>
 <el-table
 :data="tableDataEnd"
 border
 style="width: 100%">
 <el-table-column
  prop="date"
  label="日期"
  width="180">
 </el-table-column>
 <el-table-column
  prop="name"
  label="姓名"
  width="180">
 </el-table-column>
 <el-table-column
  prop="address"
  label="地址">
 </el-table-column>
 </el-table>
 <el-pagination
  @size-change="handleSizeChange"
  @current-change="handleCurrentChange"
  :current-page="currentPage"
  :page-sizes="[1, 2, 3, 4]"
  :page-size="pageSize"
  layout="total, sizes, prev, pager, next, jumper"
  :total="totalItems">
 </el-pagination>
</p>
</template>
<script>
export default {
 data() {
 return {
  tableDataBegin: [
  {
   date: "2016-05-01",
   name: "王小虎",
   address: "上海市普陀区金沙江路 1518 弄"
  },
  {
   date: "2016-05-02",
   name: "王小虎",
   address: "上海市普陀区金沙江路 1517 弄"
  },
  {
   date: "2016-05-03",
   name: "王二虎",
   address: "上海市普陀区金沙江路 1519 弄"
  },
  {
   date: "2016-05-04",
   name: "王二虎",
   address: "上海市普陀区金沙江路 1516 弄"
  },
  {
   date: "2016-05-05",
   name: "王三虎",
   address: "上海市普陀区金沙江路 1518 弄"
  },
  {
   date: "2016-05-06",
   name: "王三虎",
   address: "上海市普陀区金沙江路 1517 弄"
  },
  {
   date: "2016-05-07",
   name: "王小虎",
   address: "上海市普陀区金沙江路 1519 弄"
  },
  {
   date: "2016-05-08",
   name: "王小虎",
   address: "上海市普陀区金沙江路 1516 弄"
  }
  ],
  tableDataName: "",
  tableDataEnd: [],
  currentPage: 4,
  pageSize: 2,
  totalItems: 0,
  filterTableDataEnd:[],
  flag:false
 };
 },
 created() {
 this.totalItems = this.tableDataBegin.length;
 if (this.totalItems > this.pageSize) {
  for (let index = 0; index < this.pageSize; index++) {
  this.tableDataEnd.push(this.tableDataBegin[index]);
  }
 } else {
  this.tableDataEnd = this.tableDataBegin;
 }
 },
 methods: {
 //前端搜索功能需要区分是否检索,因为对应的字段的索引不同
 //用两个变量接收currentChangePage函数的参数
 doFilter() {
  if (this.tableDataName == "") {
  this.$message.warning("查询条件不能为空！");
  return;
  }
  this.tableDataEnd = []
  //每次手动将数据置空,因为会出现多次点击搜索情况
  this.filterTableDataEnd=[]
  this.tableDataBegin.forEach((value, index) => {
  if(value.name){
   if(value.name.indexOf(this.tableDataName)>=0){
   this.filterTableDataEnd.push(value)
   }
  }
  });
  //页面数据改变重新统计数据数量和当前页
  this.currentPage=1
  this.totalItems=this.filterTableDataEnd.length
  //渲染表格,根据值
  this.currentChangePage(this.filterTableDataEnd)
  //页面初始化数据需要判断是否检索过
  this.flag=true
 },
 openData() {},
 handleSizeChange(val) {
  console.log(`每页 ${val} 条`);
  this.pageSize = val;
  this.handleCurrentChange(this.currentPage);
 },
 handleCurrentChange(val) {
  console.log(`当前页: ${val}`);
  this.currentPage = val;
  //需要判断是否检索
  if(!this.flag){
  this.currentChangePage(this.tableDataEnd)
  }else{
  this.currentChangePage(this.filterTableDataEnd)  
  }
 }, //组件自带监控当前页码
 currentChangePage(list) {
  let from = (this.currentPage - 1) * this.pageSize;
  let to = this.currentPage * this.pageSize;
  this.tableDataEnd = [];
  for (; from < to; from++) {
  if (list[from]) {
   this.tableDataEnd.push(list[from]);
  }
  }
 }
 }
};
</script>

이 기사의 사례를 읽으신 후 방법을 마스터하셨다고 생각합니다. 더 흥미로운 정보를 보려면 PHP 중국어 웹사이트의 다른 관련 기사를 주목하세요!

추천 자료:

Webpack이 Electron 애플리케이션을 구축하는 방법

Vue.js 범용 애플리케이션 프레임워크 Nuxt.js 사용법 자세한 설명

위 내용은 vue+element를 사용하여 테이블 페이징을 구현하는 단계에 대한 자세한 설명의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!