Vue

三级全选联动（由forEach=>reduce）

2019-06-28  本文已影响0人  zhuzilou

三级全选联动本身并没有什么难点，只是不熟悉时写起来挺烦的。在写第一版时，真是各种forEach外加if判断，写着写着自己就完全晕掉了，完全靠Debug来补充各种if判断。后来发现更神奇的reduce，简化了很多代码。于是决定记录一下，在写demo的时候又学习到了新的知识点（vue改变对象的属性，视图不刷新的问题），小白果然好处多多，哈哈。

效果图如下

部分选中.png 全选.png 未全选.png

主体思路

通过设置数据属性isChoose，来控制选中/未选中样式的显示。通过reduce取isChoose的并集，让上一级状态等于该结果。

数据结构

      data() {
        return {
          // 存放所有数据
          provinceMap: {},
          // 全选按钮状态
          isChooseAll: false,
          // 存放分组按钮状态
          isGroupChooseMap: {}
        }
      },
      methods: {
        initProvince() {
          this.provinceMap = {
            湖北省: [
              {
                postalCode: 430000,
                name: '武汉市',
                // 单条数据按钮状态
                isChoose: false
              }
            ],
            湖南省: [
              {
                postalCode: 410011,
                name: '长沙市',
                isChoose: false
              },
              {
                postalCode: 427000,
                name: '张家界市',
                isChoose: false
              }
            ]
          }
          // 初始化分组按钮状态列表
          Object.keys(this.provinceMap).forEach(key => {
            this.isGroupChooseMap[key] = false
          })
        }
      }

按钮事件

全选按钮事件

设置全选按钮状态A，设置所有分组按钮状态=A，设置所有单条数据状态=A。

分组按钮事件

设置分组按钮状态B，设置该分组下所有数据按钮状态=B，全选按钮状态=所有分组状态 && B

单条数据按钮事件

设置该数据按钮状态C，所在分组状态=其他数据状态 && C，全选按钮状态=所有分组状态 && C

简单来说

  1. 一级事件：设置（二级）+ 设置（三级）；
  2. 二级事件：设置（三级）+ 检查（二级）并设置一级；
  3. 三级事件：检查（三级）并设置二级 + 检查（二级）并设置一级。

更像是个排列组合问题……数学老师看见了多半要吐血

        // 全选按钮事件
        chooseAll() {
          this.isChooseAll = !this.isChooseAll
          // console.log(this.isGroupChooseMap)
          // 设置所有分组状态
          Object.keys(this.isGroupChooseMap).forEach(key => {
            this.isGroupChooseMap[key] = this.isChooseAll
          })
          // 设置所有分组下挂信息状态
          Object.values(this.provinceMap).forEach(item => {
            Object.values(item).forEach(subItem => {
              subItem.isChoose = this.isChooseAll
            })
          })
        },
        // 分组按钮事件
        groupChooseAll(groupName) {
          // console.log(groupName)
          this.isGroupChooseMap[groupName] = !this.isGroupChooseMap[groupName]
          console.log(this.isGroupChooseMap[groupName])
          // 设置分组下挂信息状态
          this.provinceMap[groupName].forEach(city => {
            city.isChoose = this.isGroupChooseMap[groupName]
          })
          this.checkGroupChooseStatus(this.isGroupChooseMap[groupName])
        },
        // 单条记录按钮事件
        cityChoose(groupName, city) {
          let isChooseBak = city.isChoose
          city.isChoose = !isChooseBak
          // 检查该分组是否全部选中
          let checkGroupChoose = this.provinceMap[groupName].reduce((init, cur) => {
            return init && cur.isChoose
          }, city.isChoose)
          // console.log(checkGroupChoose)
          this.isGroupChooseMap[groupName] = checkGroupChoose
          this.checkGroupChooseStatus(city.isChoose)
        },
        checkGroupChooseStatus(isChoose) {
          // 检查各分组是否全部选中
          let checkAllChoose = Object.values(this.isGroupChooseMap).reduce((init, cur) => {
            return init && cur
          }, isChoose)
          // 根据检查结果设置是否全选
          this.isChooseAll = checkAllChoose
        }

HTML片段

<div id="demo" class="container">
    <div class="div2">
      <input type="radio" :class="{'radio_off': !isChooseAll, 'radio_on': isChooseAll}" @click="chooseAll()" id="all">
      <span class="match_count" :style="{color: chooseAllStyle}">&nbsp;全选</span>
    </div>
    <div class="modules">
      <div class="module" v-for="(value, name, index) in provinceMap" :key="index">
        <div class="module_title">
          <input type="radio" :class="{'radio_off': !isGroupChooseMap[name], 'radio_on': isGroupChooseMap[name]}"
            @click="groupChooseAll(name)">
          <div>
            <span class="group_name">{{name}}</span>
          </div>
        </div>
        <div class="module_cell" v-for="city in value" :key="city.postalCode">
          <div class="module_cell_li">
            <div>
              <input type="radio" :class="{'radio_off': !city.isChoose, 'radio_on': city.isChoose}"
                @click="cityChoose(name, city)">
              <span>城市名</span>
            </div>
            <div class="phone_show">{{city.name}}</div>
          </div>
        </div>
      </div>
    </div>
  </div>

插曲1：forEach=>reduce

最初的代码片段：

// 检查是否该分组选中状态
      let checkGroupChoose = this.validUserInfoMap[groupName].every(consInfo => {
        return consInfo.isChoose === !isChooseBak
      })
      console.log('isChooseBak: ' + isChooseBak)
      // console.log(checkGroupChoose)
      if (!isChooseBak && checkGroupChoose) {
        // 分组全部选中
        this.isGroupChooseMap[groupName] = true
      }
      if (isChooseBak && !checkGroupChoose) {
        // 分组部分选中
        this.isGroupChooseMap[groupName] = false
      }
      if (isChooseBak && checkGroupChoose) {
        // 分组内只有一户数据
        this.isGroupChooseMap[groupName] = !isChooseBak
      }

写的我自己都晕了，用当前状态与其他数据状态比对，然后对结果进行判断。然后就出现了bug，单分组内只有一条数据时，return A===B返回为true，于是我又添了一条if判断……至此感觉已晕死在这个全选效果里了。

既然设置的true/false来控制显示，那么为什么不使用取并集的方法呢？于是出现了return A && B，最终还是要判断结果。如果能够用前一条数据的判断结果与当前数据进行并集，如此反复不就省去了很多麻烦……

reduce就这么被动的被召唤出来，以前看到的示例都是累加值，觉得并没有什么卵用，导致基本没有用过这个函数。

延伸：当分组数据只有一条时，需要设置初始值initialValue来达到效果。
语法解释：

array.reduce(
  function(
    total,   // 必需。初始值, 或者计算结束后的返回值。
    currentValue,   // 必需。当前元素
    currentIndex,   // 可选。当前元素的索引
    arr  // 可选。当前元素所属的数组对象。
  ), 
  initialValue  // 可选。传递给函数的初始值
)

checkGroupChooseStatus(isChoose) {
    // 检查各分组是否全部选中
    let checkAllChoose = Object.values(this.isGroupChooseMap).reduce((init, cur) => {
      return init && cur
    }, isChoose)
    // 根据检查结果设置是否全选
    this.isChooseAll = checkAllChoose
}

插曲2：对已存在的对象添加属性，后续修改视图不会渲染

在写demo时，数据是手动添加的。原始数据并不包含isChoose属性，通过js动态添加（这个属性对后端是没有用的，所以在前端添加比较合适）。于是问题就出来了，console.log显示true，但视图并未渲染成选中状态，对比了项目中完成的代码并没有发现异常，为此苦恼了好久。后来百度才发现这个问题……

再次查看了项目中的代码，发现通过后台获取数据以后，并没有直接赋值给vue中的对象，而是添加过isChoose后才赋值给vue……
阴错阳差的避开了这个常识，哈哈…呵呵…呵呵哒

上一篇 下一篇

猜你喜欢

热点阅读