效果如下:
这是参考了其他博主的代码进行的更改。
实现对三种条件筛选,默认是第一项‘全部’,且实现点击后面的更多出现当前行隐藏的内容
代码实现:
<div class="row" v-for="(i, k) in typeList" :key="k">
<div class="name">{{ i.title }}:</div>
<div class="content" :class="{ hidden: !i.isActive }">
<div
v-for="(item, index) in i.contentList"
:key="index"
@click="handleClick(k, item, index)"
:class="{ actvCss: item.isShow }"
>
{{ item.text }}
</div>
</div>
<div class="collapse-right" @click="click(i, k)">
<span v-if="!i.isActive">更多</span>
<span v-if="i.isActive">收起</span>
</div>
</div>
<!-- 商品展示 -->
<div class="ContentBox" v-if="!comData.length">
<div class="nullCss">暂无相关商品~</div>
</div>
<div class="DataListBox">
<div class="box" v-for="(item, index) in comData" :key="index">
<div>{{ item.Platform }}</div>
<div>{{ item.Title }}</div>
<div>{{ item.Condition }}</div>
</div>
</div>
<!--实现点击的元素的展示-->
<div v-for="(i, v) in newArr0" :key="v">
{{ i.text }}
</div>
data(){
return{
activeKey: "",
newArr0: [],
filterForm: {
PlatformVar: "全部", // 表示当前选中的平台 设置默认 不选择时为全部
TypeVar: "全部", // 表示当前选中的类型
ConditionVar: "全部", // 表示当前选中的成色
},
typeList: [
{
title: "平台",
contentList: [
{
id: 1,
text: "全部",
},
{
text: "淘宝",
},
{
text: "天猫",
},
{
text: "京东",
},
{
text: "闲鱼",
},
{
text: "转转",
},
{
text: "1111",
},
{
text: "222222",
},
{
text: "3333",
},
], // 平台
},
{
title: "类型",
contentList: [
{
id: 2,
text: "全部",
},
{
text: "CPU",
},
{
text: "显卡",
},
{
text: "内存条",
},
{
text: "硬盘",
},
], // 类型
},
{
title: "成色",
contentList: [
{
id: 3,
text: "全部",
},
{
text: "全新",
},
{
text: "打折",
},
{
text: "二手",
},
{
text: "停售",
},
], // 成色
},
],
DataList: [
// 模拟接口返回的数据结构
{
id: 1,
Title: "i9 13900k",
Platform: "淘宝",
Type: "CPU",
Condition: "全新",
},
{
id: 2,
Title: "i9 9900ks",
Platform: "闲鱼",
Type: "CPU",
Condition: "停售",
},
{
id: 3,
Title: "i9 11900k",
Platform: "天猫",
Type: "CPU",
Condition: "全新",
},
{
id: 4,
Title: "i5 13600k",
Platform: "转转",
Type: "CPU",
Condition: "停售",
},
{
id: 5,
Title: "i5 10400f",
Platform: "京东",
Type: "CPU",
Condition: "全新",
},
{
id: 6,
Title: "i3 12100f",
Platform: "闲鱼",
Type: "CPU",
Condition: "打折",
},
],
}
},
//当内容发生变化时,会重新计算(筛选)
computed:{
comData() {
return this.DataList.filter((i) => {
console.log(i);
if (
(this.filterForm.PlatformVar === "全部" ||
this.filterForm.PlatformVar === i.Platform) &&
(this.filterForm.TypeVar === "全部" ||
this.filterForm.TypeVar === i.Type) &&
(this.filterForm.ConditionVar === "全部" ||
this.filterForm.ConditionVar === i.Condition)
) {
return i;
}
});
},
},
//数据的初始化
created() {
this.typeList.forEach((i) => {
//为对象数组的每一项设置 isActive 为 false
this.$set(i, "isActive", false);
//对当前行中的每个元素进行设置
i.contentList.forEach((item, index) => {
//设置一个项的为true,其余为false,这样默认第一项有样式
if (index === 0) {
this.$set(item, "isShow", true);
} else {
this.$set(item, "isShow", false);
}
});
});
},
methods:{
handleClick(parentIndex, val, childIndex) {
// 添加isShow===true ,显示点击出现的颜色
this.typeList[parentIndex].contentList.map((item) => {
item.isShow = false;
});
this.typeList[parentIndex].contentList[childIndex].isShow = true;
//选中的数据
let newArr1 = [];
this.typeList.map((i) => {
i.contentList.map((item) => {
if (item.isShow == true) {
newArr1.push(item);
}
});
});
this.newArr0 = newArr1;
this.filterForm.PlatformVar = this.newArr0[0].text;
this.filterForm.TypeVar = this.newArr0[1].text;
this.filterForm.ConditionVar = this.newArr0[2].text;
},
click(item, index) {
this.activeKey = index;
//判断点击的 ‘activeKey’ 是否等于点击当前行的索引,
if (this.activeKey === index) {
item.isActive = !item.isActive;//根据索引值是否相等来对 isActive的值进行取反,实现‘更多’‘收起’的效果
}
},
}
.row {
display: flex;
margin-bottom: 10px;
font-size: 20px;
cursor: pointer;
border: 1px solid seagreen;
.name {
width: 200px;
}
.content {
display: flex;
flex-wrap: wrap;
width: 800px;
div {
margin-right: 50px;
}
}
.hidden {
height: 26px;
overflow: hidden;
}
}
.actvCss {
background-color: aquamarine;
}