JS工具库之Lodash用法002 _.chunk(array, [size=1])

页面使用

import _ from "lodash"; // 引入

 

_.chunk(array, [size=1])

将数组（array）拆分成多个 size 长度的区块，并将这些区块组成一个新数组。 如果array 无法被分割成全部等长的区块，那么最后剩余的元素将组成一个区块。

 

参数

1. array (Array): 需要处理的数组
2. [size=1] (number): 每个数组区块的长度

返回

(Array): 返回一个包含拆分区块的新数组（注：相当于一个二维数组）。

模拟一个前端分页

<template>
  <div>
    12
    <div v-for="item in check()[index]" :key="item.id">
      {{ item.name }}--{{ item.id }}
    </div>
    <el-button @click="click('down')" :disabled="showdown">下一页</el-button>
    <el-button @click="click('up')" :disabled="showup">上一页</el-button>
  </div>
</template>

<script>
import _ from "lodash"; // 引入

export default {
  data() {
    return {
      index: 0,
      page: 0,
      showup: true,
      showdown: false,
    };
  },
  mounted() {
    
  },
  methods: {
    click(val) {
      this.page = this.check().length;
      if (val == "up") {
        this.index--;
      } else {
        this.index++;
      }
      if (this.index == this.page - 1) {
        this.showdown = true;
      } else {
        this.showdown = false;
      }
      if (this.index == 0) {
        this.showup = true;
      } else {
        this.showup = false;
      }
    },
    check() {
      return _.chunk(
        [
          { name: "测试50221%", id: "1" },
          { name: "测试50222%", id: "2" },
          { name: "测试50223%", id: "3" },
          { name: "测试50224%", id: "4" },
          { name: "测试50225%", id: "5" },
          { name: "测试50226%", id: "6" },
          { name: "测试50227%", id: "7" },
          { name: "测试50228%", id: "8" },
          { name: "测试50229%", id: "9" },
          { name: "测试50220%", id: "0" },
          { name: "测试50211%", id: "11" },
          { name: "测试50212%", id: "12" },
          { name: "测试50213%", id: "13" },
          { name: "测试50214%", id: "14" },
          { name: "测试50215%", id: "15" },
          { name: "测试50216%", id: "16" },
        ],
        5
      );
    },
    checkIsData() {
      const arr = [0, 1, false, 2, "", 3, {}];
      const newArr = _.compact(arr);
      const lenth = newArr.length;
      return { newArr: newArr, lenth: lenth };
    },
  
  },
};
</script>