Element 分页组件使用、时间转换

Lcry

发布于 2022-11-29 19:27:22

45200

代码可运行

文章被收录于专栏：Lcry个人博客Lcry个人博客

运行总次数：0

代码可运行

Element，‘饿了吗’，一套为开发者、设计师和产品经理准备的基于 Vue 2.0 的桌面端组件库，使用这个分页组件遇到的坑记录一下。

组件：

    <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="currentPage"
      :page-sizes="[5,10,20]"
      :page-size="10"
      layout="total, sizes, prev, pager, next, jumper"
      :total="total">
    </el-pagination>

js代码：

    data() {
      return {
        list: [],
        total: 0, // 总记录数
        currentPage: 1, // 当前页
        pageSize: 10, // 每页大小
        searchMap: {}, // 查询条件
        dialogFormVisible: false, // 编辑窗口是否可见
        pojo: {}, // 编辑表单绑定的实体对象
        id: '' // 当前用户修改的ID
      }
    }

方法代码:

     fetchData() {
        userApi.search(this.currentPage, this.pageSize, this.searchMap).then(response => {
          this.list = response.data.rows
          this.total = response.data.total
        })
      },
      handleSizeChange(val) {
        //改变每页显示的条数的时候  自动触发
        this.pageSize = val;  //动态改变每页大小
        userApi.search(this.currentPage, val, this.searchMap).then(response => {
          this.list = response.data.rows
          this.total = response.data.total
        })
      },
      handleCurrentChange(val) {
        // 当前页码改变之后，触发这个函数
        this.currentPage = val;    //动态改变当前页
        userApi.search(val, this.pageSize, this.searchMap).then(response => {
          this.list = response.data.rows
          this.total = response.data.total
        })
      }

时间戳转成普通时间方法代码：

      timestampToTime (row, column) {
        var date = new Date(row.regdate) //时间戳为10位需*1000，时间戳为13位的话不需乘1000
        var Y = date.getFullYear() + '-'
        var M = (date.getMonth()+1 < 10 ? '0'+(date.getMonth()+1) : date.getMonth()+1) + '-'
        var D = date.getDate() + ' '
        var h = date.getHours() + ':'
        var m = date.getMinutes() + ':'
        var s = date.getSeconds()
        return Y+M+D+h+m+s
      }

使用：

      <el-table-column prop="regdate" label="注册日期" :formatter="timestampToTime"></el-table-column>
      <el-table-column prop="updatedate" label="修改日期" :formatter="timestampToTime"></el-table-column>

总结：特别要注意每次切换页码和展示量的时候，要动态修改对应页码，不然会出现切换页码还是展示默认10条数据量，代码有注释，可以看（//动态改变当前页）

本文参与腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。

原始发表：2019-06-08，如有侵权请联系 cloudcommunity@tencent.com 删除

element