第十七篇 VUE ElementUI开发之数组对象的匹配问题以及对应的简单开发例子

前言：在实际开发当中，有时会涉及到数组对象的匹配问题--即一个对象数组中是否与另外一个数

前言：在开发中，有时会涉及到数组对象的匹配，并做对应的一些操作---即

组的某个属性一致，一致的话做 xxx 操作。

下面给个简单的例子：要求是，数组 arrayData1 与 arrayData2 做匹配，前者的 day 与 后者 的 value 相等的话，将后者对应的项的 status 字段修改 true。

该篇你还能学到：依据年和月 取到对应的天数。

      arrayData1: [
        { day: '1', money: '12121.00' },
        { day: '2', money: '232323.00' }
      ],
      arrayData2: [
        { label: '1日', value: '1', status: false },
        { label: '2日', value: '2', status: false },
        { label: '3日', value: '3', status: false },
        { label: '4日', value: '4', status: false },
        { label: '5日', value: '5', status: false }
      ]

个人做的两种方法：

思路都是将前者的 day 取出组成一个对象，比如 { 1: '1', 2: '2' } 这样的对象，接下来将后者进行遍历，符合要求的将对应字段修改为 true 即可。

1. 借助一个 map = {} 空对象

changeStatus() {     
       const map = {}
      this.arrayData1.forEach(item => {
        map[item.day] = item.day
      })
      this.arrayData2.forEach(aitem => {
        if (aitem.value === map[aitem.value]) {
          aitem.status = true
        } else {
          aitem.status = false
        }
      })
      console.log('array2', this.arrayData2)
}

2. 借助 reduce 进行实现（推荐第一种方法，第二种不是很好理解）

 changStatus() {
      this.arrayData2.reduce(
        (ids, item) => {
          if (ids[item.value] === item.value) {
            item.status = true
          } else {
            item.status = false
          }
          return ids
        },
        this.arrayData1.reduce((map, bitem) => {
          map[bitem.day] = bitem.day
          return map
        }, {})
      )
}

下面说下简单的用例 demo：

目的：多个选择框公用的同一个的数组可选项，但是要求实现已经被选择的选择将其 ✔ 出来，这样用户知道这个选项被选过了，不用盲猜。

简单例子，某天日期被选择后打上钩子，看效果图：

 

按照上面的算法，例子比较简单，下面直接将demo代码附上：

<template>
  <div class="array-match">
    <el-form ref="arraymatch" :model="arrayMatchForm" label-position="top">
      <el-col v-for="(item, index) in arrayMatchForm.dataOptions" :key="index">
        <el-form-item :label="`日${index + 1}`" :rules="dayRules">
          <el-select
            v-model="item.day"
            filterable
            clearable
            placeholder="请选择"
            :prop="`dataOptions[${index}].day`"
            @change="daySelect(item, index)"
          >
            <el-option
              v-for="(bitem, bindex) in DaysOptions"
              :key="bindex"
              :label="bitem.label"
              :value="bitem.value"
            >
              <span style="float: left;">{{ bitem.label }}</span>
              <span
                v-if="bitem.status"
                style="float: right;color: #2578CC; font-size: 13px;"
                ><i class="el-icon-check"></i
              ></span>
            </el-option>
          </el-select>
        </el-form-item>
      </el-col>
    </el-form>
  </div>
</template>

<script>
export default {
  data() {
    return {
      arrayMatchForm: {
        dataOptions: [{ day: '' }, { day: '' }, { day: '' }, { day: '' }]
      },
      DaysOptions: [],
      year: '2020',
      month: '4',
      dayRules: {
        required: true,
        message: '请选择日',
        trigger: ['blur', 'change']
      },
      arrayData1: [
        { day: '1', money: '12121.00' },
        { day: '2', money: '232323.00' }
      ],
      arrayData2: [
        { label: '1日', value: '1', status: false },
        { label: '2日', value: '2', status: false },
        { label: '3日', value: '3', status: false },
        { label: '4日', value: '4', status: false },
        { label: '5日', value: '5', status: false }
      ]
    }
  },
  created() {
    this.initDayOption()
    this.changStatus()
  },
  methods: {
    // 当月天初始化
    initDayOption() {
      this.DaysOptions = []
      const daysInMonth = this.getDaysInMonth(this.year, this.month)
      for (let index = 1; index <= daysInMonth; index++) {
        this.DaysOptions.push({
          label: `${index}日`,
          value: `${index}`,
          status: false
        })
      }
    },
    changStatus() {
      // 方法1： 使用 reduce 处理已被勾选的项
      // this.arrayData2.reduce(
      //   (ids, item) => {
      //     if (ids[item.value] === item.value) {
      //       item.status = true
      //     } else {
      //       item.status = false
      //     }
      //     return ids
      //   },
      //   this.arrayData1.reduce((map, bitem) => {
      //     map[bitem.day] = bitem.day
      //     return map
      //   }, {})
      // )
      //   方法2：使用对象 {} 处理已经被勾选的项
      const map = {}
      this.arrayData1.forEach(item => {
        map[item.day] = item.day
      })
      this.arrayData2.forEach(aitem => {
        if (aitem.value === map[aitem.value]) {
          aitem.status = true
        } else {
          aitem.status = false
        }
      })
      console.log('array2', this.arrayData2)
    },
    daySelect() {
      // 方法1： 使用 reduce 处理已被勾选的项
      this.DaysOptions.reduce(
        (ids, item) => {
          if (ids[item.value] === item.value) {
            item.status = true
          } else {
            item.status = false
          }
          return ids
        },
        this.arrayMatchForm.dataOptions.reduce((map, bitem) => {
          map[bitem.day] = bitem.day
          return map
        }, {})
      )
      //   方法2：使用对象 {} 处理已经被勾选的项
      //   const map = {}
      //   this.arrayMatchForm.dataOptions.forEach(item => {
      //     map[item.day] = item.day
      //   })
      //   this.DaysOptions.forEach(aitem => {
      //     if (aitem.value === map[aitem.value]) {
      //       aitem.status = true
      //     } else {
      //       aitem.status = false
      //     }
      //   })
    },
    // 依据年和月取出天数
    getDaysInMonth(year, month) {
      month = parseInt(month, 10)
      const day = new Date(year, month, 0)
      return day.getDate()
    }
  }
}
</script>

<style lang="scss" scoped></style>

希望能帮助到大家，一起学习一起进步。