element 封装分页组件,搜索组件,table分页时排序、保留select选中状态、索引排序

场景

开发时,经常见到这样的页面
后台将所欲数据传过来,前端进行分页、搜索、排序等功能.

表格数据是我用Mock生成的.

页面

<my-search placeholder='请输入搜索内容' :Allresult='Allresult' :result.sync='result' searchKey='name'>my-search>

<el-table :data="tableData" v-loading="loading" class="mytable">
	<el-table-column prop="date" label="日期">el-table-column>
    <el-table-column prop="name" label="姓名">el-table-column>
    <el-table-column prop="address" label="地址">el-table-column>
el-table>
    
<my-page ref='page' :result='result' :tableData.sync='tableData'>my-page>

tableData: [],//每页展示的数据
result: [],//过滤后，展示的数据
Allresult:[],//所有数据

page组件

<template>
  <div>
    <el-pagination
      background
      layout="prev, pager, next"
      :total="page.totalPage"
      :page-size="page.pageSize"
      :current-page.sync="page.currentPage"
      @current-change="current_change"
    >el-pagination>
  div>
template>

<script>
export default {
  props: {
    page: {
      type: Object,
      default: function() {
        return {
          totalPage: 0, //总页数
          pageSize: 5, //每页显示数量
          currentPage: 1 //当前页
        };
      }
    },
    result: { //要显示的数据
      type: Array
    },
    tableData:{ //单页显示的数据
        type: Array
    }
  },
  methods: {
    current_change(currentPage,result=this.result) {
      let start = (currentPage - 1) * this.page.pageSize;
      let end = currentPage * this.page.pageSize;
      let length = result.length;
      let tableData = [];
      tableData = result.slice(start, end);
      this.$emit('update:tableData',tableData);
    }
  },
  watch:{
      result(val){
          this.page.totalPage = val.length;
          this.page.currentPage = 1;
          this.current_change(this.page.currentPage)
      }
  }
};
script>

<style>
style>

search 组件

placeholder
searchKey 搜索字段
Allresult 所有数据
result 搜索后显示的数据

<template>
  <el-input
    :placeholder="placeholder"
    v-model="searchContent"
    @keyup.enter.native="search(searchContent)"
  >
    <el-button slot="append" icon="el-icon-search" type="primary" @click="search(searchContent)">el-button>
  el-input>
template>

<script>
export default {
  props: ["placeholder", "Allresult",'searchKey','result'],
  data() {
    return {
      searchContent: ""
    };
  },
  methods: {
    search(val) {
      let len = this.Allresult.length;
      let arr = [];
      let reg = new RegExp(this.searchContent);
      for (let i = 0; i < len; i++) {
        if (this.Allresult[i][this.searchKey].match(reg)) {
          arr.push(this.Allresult[i]);
        }
      }
      this.$emit('update:result',arr)
    }
  }
};
script>

<style>
style>

分页时,保留selection选中状态

正常选中后,切换页面,已选中的内容就没了

<el-table :data="tableData" v-loading="loading" class="mytable" @select="handleSelectionChange" @select-all='handleSelectionChange' row-key="name">
      <el-table-column type='selection' :reserve-selection='true'>el-table-column>
      ...
el-table>

row-key="name" :reserve-selection='true' 可以保留选中状态

索引,按总数排序

问题 : 每页的索引都是1,2,3…

<el-table-column type="index" :index="indexMethod"></el-table-column>

indexMethod(index) {
  let page = this.$refs["page"].page;//拿到page组件中的page对象数据
  return (page.currentPage-1) * page.pageSize + index + 1//index从0开始计数,所以+1
}

列数据排序,按总数据来排序

问题 : 只排当前页的内容,如何排序所有数据.

sortable='custom' @sort-change="sortChange"

<el-table @sort-change="sortChange">
      <el-table-column prop="name" label="姓名" sortable='custom'>el-table-column>
el-table>

sortChange({ column, prop, order }) {
	//方法
    //this.sort2(column, prop, order)
},
//中文排序
sort2(column, prop, order) {
   if (order == "ascending") {
     this.result.sort((a, b) => a[prop].localeCompare(b[prop], "zh"));
   } else {
     this.result.sort((a, b) => b[prop].localeCompare(a[prop], "zh"));
   }
 }

 ["北京","安徽","上海","重庆"]
 升序:   ["安徽","北京","重庆","上海"]

几种排序

1.数字排序

let arr = [11,1,2,23];//['11','111','2','23']
arr.sort((a,b)=>{
    return a - b;
})
console.log(arr);//[1, 2, 11, 23]  //["2", "11", "23", "111"]

2.汉字排序

let arr = ['武汉', '北京', '上海', '天津'];
arr.sort ((a,b)=>a.localeCompare(b,'zh'));
console.log(arr);//["北京", "上海", "天津", "武汉"]

3.纯字母

let arr = ['cc', 'aaaa', 'gggg', 'ddd'];
arr.sort ((a,b)=>a.localeCompare(b));
console.log(arr);//["aaaa", "cc", "ddd", "gggg"]

4. 日期

let arr = ['2012-01-01','2019-01-01','2019-07-01','2014-08-22']
arr.sort((a,b)=>{
   return new Date(a.split('-').join('/')).getTime()-new Date(b.split('-').join('/')).getTime();
})
console.log(arr);//["2012-01-01", "2014-08-22", "2019-01-01", "2019-07-01"]