项目总结-vue分页组件集成

项目总结-vue分页组件集成

后台管理的大部分页面都需要对数据进行分页显示，但是在每个页面都写分页代码太过冗余，而且当分页出现问题时，需要修改每个页面，所以我集成了一个分页组件，在每个页面直接引用这个组件，就减少了代码的冗余程度，并且需要修改分页时，只需要修改这个组件，这样引用这个组件的每个页面就改变了，就不用再修改那么多页面了。

• 组件集成

<el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="currentPage"
        :page-sizes="pageSizes"
        :page-size="pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total">
</el-pagination>

<script>
export default {
		props: {
      total:{
        type:Number,
        require:true
      },
      currentPage:{
        type:Number,
        require:false,
        default(){
          return 1
        }
      },
      pageSize:{
        type:Number,
        require:false,
        default(){
          return 10
        }
      },
      pageSizes:{
			  type:Array,
        require:false,
        default(){
			    return [10, 20, 50, 100, 200, 300, 400, 500]
        }
      }
		},
		data() {
			return {

			}
		},
		methods: {
		  //每页条数改变
      handleSizeChange(val) {
        console.log(`每页 ${val} 条`);
        this.$emit('handleSizeChange',val)
      },
      //页数改变
      handleCurrentChange(val) {
        console.log(`当前页: ${val}`);
        this.$emit('handleCurrentChange',val)
      }
		}
	}
</script>        

• 页面引用

<pagination :total="totalCount" :current-page="currentPage" :page-size="pageSize" @handleCurrentChange="handleCurrentChange" @handleSizeChange="handleSizeChange"></pagination>
<script>
import Pagination from '组件路径'
export default {
components:{
        Pagination
      },
      data() {
            return {
				//数据分页
                currentPage: 1,//当前页码
                totalCount: 1,// 总条数，根据接口获取数据长度(注意：这里不能为空)
                pageSize: 10,//页面数据显示数量
                }，
      },
      methods:{
	      handleCurrentChange: function (val) {
	          this.$data.currentPage = val;
	          console.log("this.channelId:"+this.channelId);
	          if(this.channelId == ''){
	            this.pageList();
	          }else{
	            this.findByChannelId(this.channelId);
	          }
	        },
	        handleSizeChange: function (val) {
	          this.$data.currentPage = 1;
	          this.$data.pageSize = val;
	          this.pageList();
	        },
      },
}
</script>

• 分页效果
  可选择每页多少条，可定向跳转到指定页数。