zoukankan      html  css  js  c++  java
  • 表格分页——tablePagination

    背景:表格是最为通用的展示方式,为了展示的统一性,以及分页组件的重用,这里写一个分页组件,供比较多或者较少数据2种表格进行分页展示。

    分页组件:

    <template>
      <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="pageTotal"/>
    </template>
    <script>
    export default {
      props: {
        tableBegin: {// 总数据
          type: Array,
          default () {
            return []
          }
        },
        pageSizes: {// 分页条数:数据较多设置为[25,50,100]
          type: Array,
          default () {
            return [10, 20, 30]
          }
        }
      },
      data () {
        return {
          currentPage: 1,
          pageSize: 10
        }
      },
      computed: {
        pageTotal () { // 分页前总条数
          return this.tableBegin.length
        }
      },
      watch: {
        tableBegin: {
          immediate: true,
          handler (val) { // 加载数据
            this.currentPage = 1
            this.pageSize = this.pageSizes[0] || 10
            const begin = (this.currentPage - 1) * this.pageSize
            const end = this.currentPage * this.pageSize
            const tableData = this.tableBegin.slice(begin, end)
            this.$emit('table-pagination-change', tableData, this.currentPage, this.pageSize)
          }
        }
      },
      methods: {
        // 每页条数
        handleSizeChange (val) {
          this.pageSize = val
          const begin = (this.currentPage - 1) * this.pageSize
          const end = this.currentPage * this.pageSize
          const tableData = this.tableBegin.slice(begin, end)
          this.$emit('table-pagination-change', tableData, this.currentPage, this.pageSize)
        },
        // 第几页
        handleCurrentChange (val) {
          this.currentPage = val
          const begin = (this.currentPage - 1) * this.pageSize
          const end = this.currentPage * this.pageSize
          const tableData = this.tableBegin.slice(begin, end)
          this.$emit('table-pagination-change', tableData, this.currentPage, this.pageSize)
        }
      }
    }
    </script>

    使用示例:

    import pagination from 'module-comp/tablePagination'
    
    <pagination
        :table-begin='tableBegin'
        @table-pagination-change='getTableData'/>
    // 展示数据
    getTableData (data, currentPage, pageSize) {
      this.tableData = data // 只需要赋值一次,其他情况均有传入的分页的数据回调处理
      this.currentPage = currentPage
      this.pageSize = pageSize
    }
    // 删除
    deleteRow (index, row) {
      this.tableBegin.splice((this.currentPage - 1) * this.pageSize + index, 1)
      // this.tableData.splice(index, 1)
    }

    说明:

    加入分页后表格的展示数据均由分页控制,即通过传入的tableBegin监听改变

  • 相关阅读:
    运营总监招聘-e袋洗招聘-拉勾网
    中国服饰行业十大趋势
    赢在形象力之色彩
    百度系统部 在 北京市海淀区西二旗首创空间大厦 招聘 Python-交付运维系统研发工程师
    时间规划师
    使用python/casperjs编写终极爬虫-客户端App的抓取-ZOL技术频道
    传统线下零售商已经过时了,细分电商领域的机会仍待挖掘 | 36氪
    艺术私学----免费摄影、绘画、时尚造型课程体验_豆瓣
    艺术私学------绘画免费体验课程_豆瓣
    艺术私学------绘画免费体验课程_豆瓣
  • 原文地址:https://www.cnblogs.com/wheatCatcher/p/11362557.html
Copyright © 2011-2022 走看看