前言：在实际开发当中，有时会涉及到数组对象的匹配问题--即一个对象数组中是否与另外一个数
前言：在开发中，有时会涉及到数组对象的匹配，并做对应的一些操作---即
组的某个属性一致，一致的话做 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>
希望能帮助到大家，一起学习一起进步。
原文地址：https://blog.csdn.net/Yzt_199626/article/details/117746311
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 dio@foxmail.com 举报，一经查实，本站将立刻删除。