使用vue的多条件筛选以及当前行多余内容隐藏_vue多条件联动筛选

效果如下：

这是参考了其他博主的代码进行的更改。

实现对三种条件筛选，默认是第一项‘全部’，且实现点击后面的更多出现当前行隐藏的内容

 代码实现：

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