筛选条件，点击更多，显示全部

<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>