码迷,mamicode.com
首页 > 其他好文 > 详细

关于element中el-select数据量大时如何进行分页

时间:2019-05-12 15:35:13      阅读:2241      评论:0      收藏:0      [点我收藏+]

标签:ted   20px   lis   over   rop   .text   methods   src   point   

在使用element中的el-select中因为有时候数据可能会比较多,所以我就想分步加载显示,就像:

技术图片

因此我在组件中这么写的:

技术图片

下面是样式

<style lang=‘stylus‘ scoped>
    .selectJob
        span
            width 120px
            overflow hidden
            text-overflow ellipsis
            white-space nowrap
        .text
            padding-left 10px
            font-size 14px
            font-weight bold
            cursor pointer
            color cornflowerblue
<style>

我们可以打开F12审查元素,我们可以看到元素渲染之后的样子:

技术图片

 

 下面就以我自己写的项目为例,展示剩下的过程:

<script>
export default {
  data () {
    return {
      total: null // 获取总数据量
      pageCount: null // 获取总页数
      selectPage: 1 // 当前页数
      restoreTable: [] //当前页数数据
    };
  },
  mounted () {
    this.getTableList(); // 初始化
  },
  methods: {
    getTableList (form = {}) {
      let obj = Object.assign({}, 
 {currentPage:this.selectPage,pageSize: 20}, form);
      restoreList(obj).then(res => {
        if (res.data.data && !res.data.data.hasOwnProperty(‘list‘)) { this.restoreTable = []; return; };
        this.restoreTable = res.data.data.list;
        this.total = (res.data.data && res.data.data.totalSize); // 数据总数量
        this.pageCount = Math.ceil(this.total / 20); // 因为我每次只请求20条, 所以算出总页数
        this.taskId = this.restoreTable[0].id; // 因为每次都选取第一条数据;
      });
    },
    prevePage () {
      --this.selectPage;
      if (this.selectPage < 1) { // 判断点击的页数是否小于1
        this.selectPage = 1;
      };
      this.getTableList();
    },
    nextPage () {
      if (this.selectPage < this.pageCount) { // 判断点击的页数是否小于总页数;
        ++this.selectPage;
        this.getTableList();
      }
    }
  }
};
</script>                        

好了,所有经过大概就都是这样了

 

关于element中el-select数据量大时如何进行分页

标签:ted   20px   lis   over   rop   .text   methods   src   point   

原文地址:https://www.cnblogs.com/dwenz/p/10852324.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!