原数组如下:
sourceArr:[
{month:"2020-6",id:"001",name:"lzz1"},
{month:"2020-6",id:"002",name:"lzz2"},
{month:"2020-6",id:"003",name:"lzz3"},
{month:"2020-6",id:"004",name:"lzz4"},
{month:"2020-5",id:"0011",name:"lzz11"},
{month:"2020-5",id:"0012",name:"lzz12"},
{month:"2020-5",id:"0013",name:"lzz13"},
{month:"2020-5",id:"0014",name:"lzz14"}
]
把原数组按month进行分类,把2020-6、2020-5的分别合并,渲染到页面,显示如下:
两种方法:
方法1:把原数组转化成【对象】进行渲染
转化后的targetObj如下:
targetObj={
"2020-6":[
{month:"2020-6",id:"001",name:"lzz1"},
{month:"2020-6",id:"002",name:"lzz2"},
{month:"2020-6",id:"003",name:"lzz3"},
{month:"2020-6",id:"004",name:"lzz4"}
],
"2020-5":[
{month:"2020-5",id:"0011",name:"lzz11"},
{month:"2020-5",id:"0012",name:"lzz12"},
{month:"2020-5",id:"0013",name:"lzz13"},
{month:"2020-5",id:"0014",name:"lzz14"}
]
}
源码:
<template>
<view>
<view class="item" v-for="(item,data) in targetObj" :key="data">
<uni-section :title="data" type="line"></uni-section>
<uni-list>
<uni-list-item v-for="(item2,index) in item" :key="index" :title="item2.month" :badgeText="item2.name"
:showArrow="false" :showBadge="true"></uni-list-item>
</uni-list>
</view>
</view>
</template>
<script>
import uniSection from '@/components/uni-section/uni-section.vue'
import uniList from '@/components/uni-list/uni-list.vue'
import uniListItem from '@/components/uni-list-item/uni-list-item.vue'
export default {
components: {
uniSection,
uniList,
uniListItem
},
data() {
return {
targetObj: {
"2020-6": [{month: "2020-6",id: "000",name: "lzz0"}],
},
sourceArr: [
{month: "2020-6",id: "001",name: "lzz1"},
{month: "2020-6",id: "002",name: "lzz2"},
{month: "2020-6",id: "003",name: "lzz3"},
{month: "2020-6",id: "004",name: "lzz4"},
{month: "2020-5",id: "0011",name: "lzz11"},
{month: "2020-5",id: "0012",name: "lzz12"},
{month: "2020-5",id: "0013",name: "lzz13"},
{month: "2020-5",id: "0014",name: "lzz14"}
]
}
},
onLoad() {
this.fromArrToObj()
},
methods: {
fromArrToObj() {
/* targetObj={
"2020-6":[
{month:"2020-6",id:"001",name:"lzz1"},
{month:"2020-6",id:"002",name:"lzz2"},
{month:"2020-6",id:"003",name:"lzz3"},
{month:"2020-6",id:"004",name:"lzz4"}
],
"2020-5":[
{month:"2020-5",id:"0011",name:"lzz11"},
{month:"2020-5",id:"0012",name:"lzz12"},
{month:"2020-5",id:"0013",name:"lzz13"},
{month:"2020-5",id:"0014",name:"lzz14"}
]
*/
// 1 循环sourceArr每一条,判断targetObj[item.month]的值
// -a 有值,追加
// -b 无值,组合成新对象
this.sourceArr.forEach(item => {
let _month = item.month
if (!this.targetObj[_month]) {
this.targetObj[_month] = []
}
this.targetObj[_month].push(item)
})
console.log("this.targetObj===", this.targetObj);
},
}
}
</script>
方法2:把原数组转化成新【数组】进行渲染
转化后的targetArr如下:
targetArr=[
{
month:"2020-6",
data:[
{month:"2020-6",id:"001",name:"lzz1"},
{month:"2020-6",id:"002",name:"lzz2"},
{month:"2020-6",id:"003",name:"lzz3"},
{month:"2020-6",id:"004",name:"lzz4"}
]
},
{
month:"2020-5",
data:[
{month:"2020-5",id:"0011",name:"lzz11"},
{month:"2020-5",id:"0012",name:"lzz12"},
{month:"2020-5",id:"0013",name:"lzz13"},
{month:"2020-5",id:"0014",name:"lzz14"}
]
}
]
源码:
<template>
<view>
<view class="item" v-for="(item,index) in targetArr" :key="index">
<uni-section :title="item.month" type="line"></uni-section>
<uni-list>
<uni-list-item v-for="(item2,index2) in item.data" :key="index2" :title="item2.month" :badgeText="item2.name"
:showArrow="false" :showBadge="true"></uni-list-item>
</uni-list>
</view>
</view>
</template>
<script>
import uniSection from '@/components/uni-section/uni-section.vue'
import uniList from '@/components/uni-list/uni-list.vue'
import uniListItem from '@/components/uni-list-item/uni-list-item.vue'
export default {
components: {
uniSection,
uniList,
uniListItem
},
data() {
return {
targetArr:[
{
month:"2020-6",
data:[{month:"2020-6",id:"000",name:"lzz0"}],
},
],
sourceArr: [
{month: "2020-6",id: "001",name: "lzz1"},
{month: "2020-6",id: "002",name: "lzz2"},
{month: "2020-6",id: "003",name: "lzz3"},
{month: "2020-6",id: "004",name: "lzz4"},
{month: "2020-5",id: "0011",name: "lzz11"},
{month: "2020-5",id: "0012",name: "lzz12"},
{month: "2020-5",id: "0013",name: "lzz13"},
{month: "2020-5",id: "0014",name: "lzz14"}
]
}
},
onLoad() {
this.fromArrToArr()
},
methods: {
fromArrToArr() {
/* targetArr=[
{
month:"2020-6",
data:[
{month:"2020-6",id:"001",name:"lzz1"},
{month:"2020-6",id:"002",name:"lzz2"},
{month:"2020-6",id:"003",name:"lzz3"},
{month:"2020-6",id:"004",name:"lzz4"}
]
},
{
month:"2020-5",
data:[
{month:"2020-5",id:"0011",name:"lzz11"},
{month:"2020-5",id:"0012",name:"lzz12"},
{month:"2020-5",id:"0013",name:"lzz13"},
{month:"2020-5",id:"0014",name:"lzz14"}
]
}
]
*/
// 1 目标targetArr为空时,把sourceArr[0]作为第一条
// 2 目标targetArr非空时,循环sourceArr每一条
// -a 获取targetArr的最后一条的month值
// -b 和sourceArr的每一条month做对比
// -相同,则存进去
// -不同,则追加
this.sourceArr.forEach(item => {
let lens = this.targetArr.length;
if (lens == 0) {
let one = {
month: item.month,
data: [item]
};
this.targetArr.push(one);
} else {
let _month = this.targetArr[lens - 1].month;
if (_month == item.month) {
this.targetArr[lens - 1].data.push(item);
} else {
let one = {
month: item.month,
data: [item]
};
this.targetArr.push(one);
}
}
})
console.log("this.targetArr===", this.targetArr);
},
}
}
</script>