vue实现自定义分页，获取本地文件解决中文乱码问题，手动处理多数据分页

1、封装分页组件，代码部分

<template>
  <div class="footer" id="pagefoot">
    <div class="footLeft">
        <span>每页：</span>
        <input type="text" v-model="pageAutoSize">
        <span> 条，</span>
        <span>共计：{{countSize}}条，当前：{{indexCurrent}}/{{totalPage}}页</span>
    </div>
    <div class="footRight">
        <span class="page_btn page_border1" @click="changePage('first')">第一页</span>
        <span class="page_btn page_border1" @click="changePage('prevent')">上一页</span>
        <span class="page_btn page_border1" @click="changePage('next')">下一页</span>
        <span class="page_btn page_border1" @click="changePage('last')">最后页</span>
        <input type="text" class="page_border1" v-model="pageIndex">
        <span class="page_btn" @click="changePage('jump')">跳转</span>
    </div>
  </div>
</template>
<script>
export default {
  props: {
      // 总页数
      totalPage: {
          type: Number || String,
          required: true
      },
      // 总条数
      countSize:{
          type: Number || String,
          required: true
      }
  },
  data() {
    return {
      pageAutoSize: 21, // 每页输入的条数
    //   countSize: 24, // 总条数
      indexCurrent: 1, // 当前页数
    //   totalPage: 5, // 总页数
      pageIndex: 1, // 当前页码
    }
  },
  methods: {
      changePage(value){
          if(value == 'first'){
            // 第一页
            this.pageIndex = 1
            this.indexCurrent = 1
          }else if(value == 'prevent'){
            // 上一页
            if(this.pageIndex == 1){
                this.pageIndex = 1
                this.indexCurrent = 1
            }else{
                this.pageIndex--
                this.indexCurrent = this.pageIndex
            }
          }else if(value == 'next'){
            // 下一页
            if(this.pageIndex >= this.totalPage){
                this.pageIndex = 1
                this.indexCurrent = 1
            }else{
                this.pageIndex++
                this.indexCurrent = this.pageIndex
            }
          }else if(value == 'last'){
            // 最后一页
            this.pageIndex = this.totalPage
            this.indexCurrent = this.totalPage
          }else if(value == 'jump'){
            // 跳转
            if(this.pageIndex > this.totalPage){
                this.pageIndex = 1
                this.indexCurrent = 1
            }else{
                this.indexCurrent = this.pageIndex
            }
          }
          this.$emit('changePage',{pageIndex: Number(this.pageIndex), pageAutoSize: Number(this.pageAutoSize)})
      }
  }
};
</script>
<style>
.footer {
  height: 5%;
  width: 98%;
  font-size: 12px;
  color: #000;
  margin-top: 10px;
  position: absolute;
  bottom: 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.footer input{
    background: #cce8cf;
    border: 1px solid #ccc;
    width: 35px;
    height: 30px;
    font-size: 10px;
    line-height: 30px;
    text-align: center;
}
.footRight{
    display: flex;
}
.page_btn {
    display: inline-block;
    border: 1px solid #dddddd;
    padding: 1px 3px 1px 3px;
    text-align:center;
    padding-left: 10px;
    padding-right: 10px;
    height: 30px;
    line-height: 28px;
    color: #4d89d1;
    cursor: pointer;
    user-select: none;
}
.footRight .page_border1 {
    border: 1px solid #ccc;
    border-right: none;
}
.footRight .page_btn:hover {
    background: #4d89d1 !important;
    text-align: center;
    color: white;
    padding: 0 10px;
    height: 30px;
    text-decoration: none;
}
</style>

2、在页面中引入和使用分页组件

// 引入分页组件
import Footer from "../../../components/PageFoot.vue"
export default {
  components: { Footer },
  data() {
    return {
       // 分页数据
      totalPage: 5, // 总页数
      countSize: 24, // 总条数
      pageIndex: 1, // 当前页码
      pageAutoSize: 21, // 每页输入的条数
   }
 }
}

// 使用分页组件
<Footer :totalPage="totalPage" ref="footer" :countSize="countSize" @changePage="changePage"></Footer>

3、页面分页js部分

mounted () {
    // 获取表格数据
    this.getTableList()
    // 一开始获取分页组件定义的页码和条数
    this.pageIndex = Number(this.$refs.footer.pageIndex)
    this.pageAutoSize = Number(this.$refs.footer.pageAutoSize)
  },
  methods: {
    // 获取表格数据，获取本地的txt文件，解决中文乱码
    getTableList(){
        let _this = this
        axios({
        method: 'get',
        url: '../../static/jsonData/s1/s1.txt',
       // 以下为解决中文乱码的主要代码
        responseType: 'blob',
        transformResponse: [function(data) {
        //   console.log(246, data);
          let reader = new FileReader()
        //   console.log(248, reader);
          reader.readAsText(data, 'GBK')
          reader.onload = function(e) {
            var music = JSON.parse(reader.result)
            // console.log(music)
            _this.tableDataAll = music
            _this.updateData()
          }
          return data
        }],
        headers: {
          'X-Requested-With': 'XMLHttpRequest',
          'Content-Type': 'application/x-www-form-urlencoded'
        }
      }).then(res => {
            console.log(260, res);
        })
    },
    // 处理数据，获取的数据很多，需要自己手动处理数据分页
    updateData(){
        let arr = []
        arr = this.tableDataAll.map((item,index) => {
            return {...item, id: index+1}
        })
        console.log(arr);
        this.tableList = arr.filter((item, index) =>
          index < this.pageIndex * this.pageAutoSize &&
          index >= this.pageAutoSize * (this.pageIndex - 1)
        );
        this.countSize = Number(arr.length)
        this.totalPage = Math.ceil(Number(arr.length) / Number(this.$refs.footer.pageAutoSize))
        console.log(this.totalPage);
    },
    // 改变页码
    changePage(index) {
      console.log(index);
      if(Number(index.pageAutoSize) !== this.pageAutoSize){
          this.pageIndex = 1
          this.$refs.footer.pageIndex = 1
          this.$refs.footer.indexCurrent = 1
      }else{
          this.pageIndex = Number(index.pageIndex)
      }
      this.pageAutoSize = Number(index.pageAutoSize)
      this.updateData()
    },
}