vue-element-admin 封装分页组件

最新推荐文章于 2024-09-11 12:36:45 发布

小Q宇宙

最新推荐文章于 2024-09-11 12:36:45 发布

阅读量2.2k

点赞数

分类专栏： vue

本文链接：https://blog.csdn.net/weixin_43310339/article/details/107914845

版权

vue 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

第一步把需要封装的代码写入组件 pagination.vue

<template>
  <el-pagination
    style="position: fixed;bottom: 0;margin-bottom: 15px"
    background
    layout="prev, pager, next"
    :page-size="pageSize"
    :current-page="currentPage"
    @current-change="handleCurrentChange"
    :total="totalPage">
  </el-pagination>
</template>

<script>
  export default {
    name: "pagination",
    props: ['input_data', 'output_data'],
    data() {
      return {
        pageSize: 1,
        currentPage: 1,
        totalPage: 1,
        data: []
      }
    },
    //监听input_data input_data 发生改变及时改变分页
    watch: {
      input_data: {
        handler(newVal) {
          console.log(newVal);
          this.data = newVal;
          this.currentPage = 1;
          this.changePage(this.data);
        }
      }
    },
    methods: {
      //点击分页
      handleCurrentChange(currentPage) {
        this.currentPage = currentPage;
        this.changePage(this.data);
      },
      //重置分页数据
      changePage(data) {
        let start = (this.currentPage - 1) * this.pageSize;
        let end = this.currentPage * this.pageSize;
        this.$emit('update:output_data', data.slice(start, end)); //子组件可以使用  this.$emit('update:output_data', data) 更新父组件的数据
        this.totalPage = data.length;
      }
    }
  }
</script>

第二步在父组件中引入

<template>
  <div class="app-container">
    <el-table :data="tableDataOut" style="width: 100%">
      <el-table-column type="index" label="#" width="180"></el-table-column>
      <el-table-column prop="user_name" label="用户名" width="180"></el-table-column>
      <el-table-column prop="user_mobile" label="手机" width="180"></el-table-column>
      <el-table-column prop="wechat_id" label="微信" width="180"></el-table-column>
    </el-table>

//子组件标签使用
    <Pagination :input_data.sync="tableDataIn" :output_data.sync="tableDataOut"></Pagination>
  </div>
</template>

<script>
  import {getUserInfoList} from '@/api/user_info'
  import Pagination from '@/views/components/pagination' //导入子组件
  export default {
    name:"user_info",
    components:{Pagination},
    inject:['reload'],
    data() {
      return {
        tableDataIn: [], //数据列表
        tableDataOut: [], //数据列表
        totalCount:'', //数据总数
      }
    },
    methods:{
      getUserInfoList(){
        getUserInfoList().then(res=>{
            if(res.code == 200){
              this.tableDataIn = res.data;
              this.totalCount = res.total_count;
            }else{
              this.$message.error('数据请求失败，请刷新后重试！！！');
            }
        })
      }
    },
    mounted(){
      this.getUserInfoList();
    }
  }
</script>