<template>
<!-- 数据管理 -->
<div class="home-wrapper">
<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.arrList" :key="index" @click="handleClick(k, item, index)" :class="{ actvCss: item.isShow }">
{{ item.text }}
</div>
</div>
<div class="collapse-right" @click="clickBtn(i, k)">
<span v-if="!i.isActive">更多</span>
<span v-if="i.isActive">收起</span>
</div>
</div>
<!--实现点击的元素的展示-->
<div v-for="(i, v) in newArr0" :key="v">
{{ i.text }}
</div>
</div>
</template>
<script>
export default {
name: "",
props: [""],
data() {
return {
activeKey: "",
newArr0: [],
filterForm: {
PlatformVar: "全部", // 表示当前选中的平台 设置默认 不选择时为全部
},
typeList: [
{
title: "分类",
arrList: [
{
id: 1,
text: "全部",
},
{
text: "111",
},
{
text: "222",
},
{
text: "333",
},
{
text: "444",
},
{
text: "555",
},
{
text: "666",
},
{
text: "777",
},
{
text: "888",
},
{
text: "999",
},
{
text: "1010",
},
], // 平台
},
],
};
},
//数据的初始化
created() {
this.typeList.forEach((i) => {
//为对象数组的每一项设置 isActive 为 false
this.$set(i, "isActive", false);
//对当前行中的每个元素进行设置
i.arrList.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].arrList.map((item) => {
item.isShow = false;
});
this.typeList[parentIndex].arrList[childIndex].isShow = true;
//选中的数据
let newArr1 = [];
this.typeList.map((i) => {
i.arrList.map((item) => {
if (item.isShow == true) {
newArr1.push(item);
}
});
});
this.newArr0 = newArr1;
this.filterForm.PlatformVar = this.newArr0[0].text;
},
clickBtn(item, index) {
this.activeKey = index;
//判断点击的 ‘activeKey’ 是否等于点击当前行的索引,
if (this.activeKey === index) {
item.isActive = !item.isActive; //根据索引值是否相等来对 isActive的值进行取反,实现‘更多’‘收起’的效果
}
},
},
};
</script>
<style lang="scss" scoped>
.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;
}
</style>
04-13
223