vue+element 表单相关项目问题（五）——reduce用来遍历去重

持续创作，加速成长！这是我参与「掘金日新计划 · 6 月更文挑战」的第21天，点击查看活动详情

1.reduce用来遍历去重

1.1 reduce定义

reduce() 方法接收一个函数作为累加器，数组中的每个值（从左到右）开始缩减，最终计算为一个值。 reduce() 可以作为一个高阶函数，用于函数的 compose。

注意  reduce() 对于空数组是不会执行回调函数的。

1.2 语法解释

array.reduce(function(total, currentValue, currentIndex, arr), initialValue)

function(total,currentValue, index,arr)必需的参数。用于执行每个数组元素的函数，最多可接收4个。

• total: 必须，初始值, 或者计算结束后的返回值。
• currentVaule：必须，当前元素数组的值。
• currentIndex：必须，当前数组元素的数字索引。
• array：可选，包含该元素的数组对象。
• initialValue：可选，传递给函数的初始值。

1.3 实例

var arrNum = [1, 2, 3], sum = 0;
function f(total,currentVaule) {
  sum=total+currentVaule;
  return sum;
}
arrNum.reduce(f);
console.log(sum);  //6

在实际项目中，比如我这个项目，我得到一组数据后，有的部门名字重复，这是就要用到去重了，代码如下，其中convertTree是将原来得到的数据结构成label和value字段，这里不在展示。

   //岗位
    _loadRoles() {
      SmsUserService.MyUserlist().then((res) => {
        // 去重
        let arroption = this.convertTree(res.data);
        let hash = {};
        arroption = arroption.reduce(function (item, next) {
          hash[next.label] ? "" : (hash[next.label] = true && item.push(next));
          return item;
        }, []);
        this.edit.roles = arroption;
        console.log(this.edit.roles, "123rol");
        this.loading.editWin = false;
      });
    },

1.4效果

2. Pagination 分页问题

2.1 问题描述

当数据量过多时，可以使用分页分解数据。后台管理项目基本上都要用到page分页，可以自定义为任意N条数据进行渲染当前页面，官方文档是这样写的 | Element。

2.2 代码分析

2.2.1 div部分

   <!-- 页数 -->
    <div class="page__wrapper">
      <el-pagination
        @size-change="pageSizeChange"
        @current-change="currentPageChange"
        :current-page="query.pageNo"
        :page-sizes="[10, 20, 50]"
        :page-size="query.pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="this.page.recordCount"
      >
      </el-pagination>
    </div>

size-change：是个触发事件，当pagesize改变时触发，这里改变的是每页条数；
current-change：也是个触发事件，当currentPage改变时触发，这里改变的是当前页；
current-page：是当前页数，类型为number，默认值为1；
page-sizes：是每页显示个数选择器的选项设置，是一个数组，上面代码中我写的是[10,20,50]三种类型；
:page-size="query.pageSize"：这里相当于当前绑定的数值，传给后端数据的page里；
layout：组件布局，子组件名用逗号分隔。可选total, sizes, prev, pager, next, jumper，slot
:total="this.page.recordCount"：是总条目数，this.page.recordCount是data里面设置的，可以通过methods里获取到的总条目数传给它。

2.2.2 js部分

  data() {
    return {
      query: {
        pageNo: 1,
        pageSize: 10,
      },
      page: { recordCount: 0 },
    };
  },
  
    methods: {
    getOpenList() {
      this.query.businessId = this.$route.query.id
      console.log(this.query);
      this.loading.list = true;
      ProductService.openList(this.query).then((res) => {
        this.tableData = res.data;
        this.page = res.page;//拿到后端的page的数据
        this.loading.list = false;
      });
    },   
    pageSizeChange(pageSize) {
      this.query.pageSize = pageSize;
      this.getOpenList();
    },
    currentPageChange(pageNo) {
      this.query.pageNo = pageNo;
      this.getOpenList();
    },
    }

效果

至此大功告成！ 由于是新手，最近遇到了很多棘手的问题，我将持续在掘金上更新！