基于element-ui插件设置页脚

	<template>
	  <div>
	      <!-- 分页区域  @size-change页面条数发生变化时 @current-change页数发生变化时 :current-page绑定当前页数 :page-sizes每页显示条数选择  :page-size当地当前页面的条数    layout 显示的内容   :total 绑定总条数-->
	      <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="getTableList.pagenum" :page-sizes="[10, 20, 30, 40]" :page-size="getTableList.pagesize" layout="total, sizes, prev, pager, next, jumper" :total="total">
	      </el-pagination>
	  </div>
	</template>

	<script>
	export default {
	  data () {
	    return {
	      input3:'',
	      // 商品列表数据
	      tableList:[],
	      // 获取商品列表数据的参数
	      getTableList: {
	        query: '',
	        // 当前页数
	        pagenum: 1,
	        // 页面显示条数
	        pagesize: 10
	      },
	      // 总条数
	      total:0
	    }
	  },
	  methods: {
	    // 获取商品列表数据 get请求
	    async getTableListFun () {
	      const {data:res} = await this.$http.get('goods',{params:this.getTableList})
	      console.log(res)
	      if (res.meta.status !== 200) {
	        return this.$message.error('获取商品列表数据失败')
	      }
	      this.$message.success('获取商品列表数据成功')
	      this.tableList = res.data.goods
	      this.total = res.data.total
	    },
	    // 页面条数发生变化时
	    handleSizeChange (newSize) {
	      this.getTableList.pagesize = newSize
	      this.getTableListFun()
	    },
	    handleCurrentChange (newPage) {
	      this.getTableList.pagenum = newPage
	      this.getTableListFun()
	    }
	  },
	  created () {
	    // 使用获取商品列表数据 get请求函数 
	    this.getTableListFun()
	  }
	}
	</script>