<template>
<view>
<view>商品种类</view>
<view class="classifyBigBox">
<view class="oneClassify flex" :class="{selectActive:selected[item.id]==true}" v-for="(item,i) in classifyList"
@click="onSelectClassify(item.id)">
{{item.name}}
</view>
<view @click="onClear">重置</view>
<view @click="onConfirmFiltrate">确定筛选</view>
</view>
</view>
</template>
<script>
export default {
data() {
return {
classifyList: Array.from({
length: 10
}).map((v, index) => {
return {
id: index,
name: `菜品${index}`
}
}), //所以分类数组
selected: {}, //选取的分类 ,用对象更方便存取数据
}
},
methods: {
//选取分类
onSelectClassify(id) {
this.$set(this.selected, id, !this.selected[id]) //动态更新视图数据
},
//重置
onClear() {
this.selected = {}
},
//提交筛选
onConfirmFiltrate() {
let select = [] //选择的筛选结果数组
const {
classifyList,
selected
} = this
//Object.keys循环遍历对象,如果值为true,就对比所有分类数组,拿到选择的筛选数据
Object.keys(selected).forEach(key => {
if (selected[key]) {
for (let i = 0; i < classifyList.length; i += 1) {
classifyList[i].id == key ? select.push(classifyList[i]) : ''
}
}
})
}
console.log(select ,"选择结果数组-----")
}
}
</script>
<style>
.classifyBigBox {
margin: 47rpx 0;
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-gap: 50rpx;
}
.oneClassify {
display: flex;
align-items: center;
padding: 17rpx;
justify-content: center;
background: F7F7F7;
border-radius: 13rpx;
color: #999;
}
.selectActive {
background: #FF8324;
color: #FFFFFF;
}
</style>
并非完整代码,其它次要样式代码没有贴出,功能实现完整复制可用