VUE cli3.0 +elementUi 分页 后台管理系统 实现多数据分页功能

必备知识

• 熟悉elementUI库的使用
• vuecli3.0 的使用

1. 第一个坑 formatter 函数的使用

        <el-table-column fixed header-align="center" align="center" :formatter="change" prop="isHot" label="是否热门" width="250">

 methods: {
    			change(row, column, cellValue, index) {
     			 return cellValue ? '是' : '否'
  			},
    }

一般用来格式化内容 这里 我使用change函数来转化 将布尔值转化为文字 一定要有四个参数 如果不知道这四个参数是什么 那么可以打印一下(这里不演示)

2 elementUI的分页 Pagination

看到下面的代码先别慌 我下面会讲解

<el-pagination :hide-on-single-page="total<pageSize? true:false" @size-change="handleSizeChange" :page-sizes="[5, 10, 20, 40]" @current-change="handleCurrentChange" :current-page="pageNum" :page-size="pageSize" layout="total, sizes, prev, pager, next, jumper" :total="total">
</el-pagination>

• hide-on-single-page 是否在只有一页的情况下隐藏
• size-change 相当于 监听在列表长度大小改变时的动作 比如说改变单页显示的项目条数
• current-change 相当于监听改变当前页数的函数 比如说下一页
• layout 组件布局，子组件名用逗号分隔 其余的属性都好理解
  其他的都在这呢

	//data里面的数据
   data() {
    return {
      list: [],
      total: 5,
      pageNum: 1,
      pageSize: 10
    }
  },

	//相当于监听两种变化 一旦变化 立刻拉取数据并渲染
    handleSizeChange(size) {
      this.pageSize = size
      console.log(this.pageSize) //每页下拉显示数据条数
      this.getList(this.pageNum, this.pageSize)
    },
    handleCurrentChange(currentPage) {
      this.pageNum = currentPage
      console.log(currentPage) //点击第几页
      this.getList(this.pageNum, this.pageSize)
    },

    //获取数据
    async getList(pageNum, pageSize) {
      let url = '/city/getList'
      let data = {
      //这里看后台数据的格式是啥样的  此时的后台是  
        params: {
          pageNum,
          pageSize
        }
      }
      let res = await this.$axios.get(url, data)
      // console.log(res)
      this.list = res.cities
      this.total = res.total
    },

	//刚进入列表的时候就执行一次
    created() {
    this.getList(this.pageNum)
  }