집 > 기사 > 웹 프론트엔드 > Vue + 요소에서 테이블 페이징을 구현하는 방법

Vue + 요소에서 테이블 페이징을 구현하는 방법

亚连원래의: 2018-06-15 16:24:051864검색

우리 모두 알고 있듯이 Element는 백엔드 프로젝트를 더 쉽고 빠르게 개발하는 데 도움이 되는 Vue.js 백엔드 구성 요소 라이브러리 세트입니다. 다음 글에서는 vue + 요소를 사용하여 테이블 페이징 및 프런트엔드 검색을 구현하는 방법에 대한 관련 정보를 주로 소개합니다. 필요한 친구들이 참고할 수 있습니다.

Foreword

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>

위 내용은 모두를 위해 정리한 내용입니다. 앞으로 도움이 되길 바랍니다.

Vue + 요소에서 테이블 페이징을 구현하는 방법

관련 기사