vue分类筛选

提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档

---

一、 效果

二、使用

重点代码：

// 筛选的内容
  const vm={
        id1:id1==0 ? '':id1,
        id2:id2==0 ? '':id2,
        id3:id3==0 ? '':id3,
        id4:id4==0 ?"0":id4,
      }
      // 开始筛选
      var lis=this.bottomCenterAll.filter((item)=>{
        return Object.values(vm).every((key,index)=>{
          return item[Object.keys(vm)[index]].includes(key)
        })
      })
     // 赋值
      this.bottomCenter = lis

总的代码：

<template>
  <div id="NewsInformation">
    <!-- 选择模板部分 -->
    <div class="checkAll">
      <div class="top">
        <div class="line">
          <p class="title t2">行业</p>
          <div class="fff">
            <span
              class="content"
              v-for="(l1, i1) in industyrList"
              :class="industryId == l1.type ? 'colorSpan' : ''"
              :key="i1"
              @click="changeItem('行业', l1.type)"
              >{{ l1.label }}</span
            >
          </div>
        </div>
        <div class="line">
          <p class="title t2">场景</p>
          <div class="fff">
            <span
              class="content"
              v-for="(l1, i1) in mapList"
              :class="mapId == l1.type ? 'colorSpan' : ''"
              :key="i1"
              @click="changeItem('场景', l1.type)"
              >{{ l1.label }}</span
            >
          </div>
        </div>
        <div class="line">
          <p class="title">功能</p>
          <div class="fff">
            <span
              class="content"
              v-for="(l1, i1) in functionList"
              :class="functionId == l1.type ? 'colorSpan' : ''"
              :key="i1"
              @click="changeItem('功能', l1.type)"
              >{{ l1.label }}</span
            >
          </div>
        </div>
        <div class="line">
          <p class="title">终端</p>
          <div class="fff">
            <span
              class="content"
              v-for="(l1, i1) in terminalList"
              :class="terminalId == l1.type ? 'colorSpan' : ''"
              :key="i1"
              @click="changeItem('终端', l1.type)"
              >{{ l1.label }}</span
            >
          </div>
        </div>
      </div>
      <el-divider></el-divider>
      <!-- 列表 -->
      <div class="center" v-if="isShow == '1'">
        <div class="card" v-for="(b, i) in bottomCenter" :key="i">
          <div class="top">
            <img @mousemove="hoverVal(i)" :src="b.src" alt="" />
            <!-- <div :class="this.isHover==i ? 'cover' :''">查看详情</div> -->
          </div>
          <div class="bottom">
            <p>{{ b.title }}</p>
            <span style="height: 42px; display: inline-block">{{
              b.content
            }}</span>
            <div class="tag_dail">
              <div class="left">
                <el-tag type="info" v-for="(b2, i2) in b.tagList" :key="i2">{{
                  b2
                }}</el-tag>
              </div>
              <div class="right">
                <i></i>
                <span>{{ b.num }}人在使用</span>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="center" style="grid-template-columns: auto" v-else>
        <el-empty style="margin: 10px auto" :image-size="200"></el-empty>
      </div>
    </div>
  </div>
</template>
  <script>
export default {
  name: "NewsInformation",
  data() {
    return {
      //   scrollReveal: scrollReveal(),
      isShow: "1",
      loading: false,
      industryId: "0",
      mapId: "0",
      functionId: "0",
      terminalId: "0",
      checkName: "",
      // isHover:-1,
      /* 行业 */
      industyrList: [
        { type: "0", label: "全部" },
        { type: "1", label: "互联网" },
        { type: "2", label: "教育行业" },
        { type: "3", label: "社会公益" },
        { type: "4", label: "服务业" },
        { type: "5", label: "电商零售" },
      ],
      /* 场景 */
      mapList: [
        { type: "0", label: "全部" },
        { type: "1", label: "企业门户" },
        { type: "2", label: "企业内部应用" },
        { type: "3", label: "预约邀请" },
        { type: "4", label: "营销活动" },
        { type: "5", label: "功能模块" },
      ],
      /* 功能 */
      functionList: [
        { type: "0", label: "全部" },
        { type: "1", label: "审批流" },
        { type: "2", label: "数据报表" },
        { type: "3", label: "OCR识图" },
      ],
      /* 终端 */
      terminalList: [
        { type: "0", label: "全部平台" },
        { type: "1", label: "小程序" },
        { type: "2", label: "PC" },
        { type: "3", label: "H5" },
      ],
      /* 结束 */
      bottomCenterAll: [
        {
          title: "快速开始模板111",
          content:
            "用于展示微搭低代码的标准能力使用方式，如表单、表格、门户等常用基础能力示例",
          src: require("../assets/img/model/i1.jpg"),
          num: "39613",
          tagList: ["小程序", "PC"],
          id1: "1",
          id2: "1",
          id3: "1",
          id4: ["1", "2","0"],
        },
        {
          title: "机械行业官网模板121",
          content: "企业名片机械行业",
          src: require("../assets/img/model/i1.jpg"),
          num: "468",
          tagList: ["H5", "PC"],
          id1: "1",
          id2: "2",
          id3: "1",
          id4: ["3","0"],
        },
        {
          title: "春日活动模版322",
          content: "用于日常活动邀请与宣传",
          src: require("../assets/img/model/i1.jpg"),
          num: "9309",
          tagList: ["小程序", "H5"],
          id1: "1",
          id2: "2",
          id3: "2",
          id4: ["2", "2","0"],
        },
        {
          title: "快速开始模板433",
          content:
            "用于展示微搭低代码的标准能力使用方式，如表单、表格、门户等常用基础能力示例",
          src: require("../assets/img/model/i1.jpg"),
          num: "39",
          tagList: ["小程序", "pc"],
          id1: "4",
          id2: "3",
          id3: "3",
          id4: ["2", "2","0"],
        },
        {
          title: "快速开始模板533",
          content:
            "用于展示微搭低代码的标准能力使用方式，如表单、表格、门户等常用基础能力示例",
          src: require("../assets/img/model/i1.jpg"),
          num: "39",
          tagList: ["小程序", "pc"],
          id1: "5",
          id2: "3",
          id3: "3",
          id4: ["2", "2","0"],
        },
      ],
      bottomCenter: [],
    };
  },
  methods: {
    /* 跳转链接 */
    changeItem(name, id) {
      this.checkName = name;
      if (name === "行业") {
        this.industryId = id;
      } else if (name === "场景") {
        this.mapId = id;
      } else if (name === "功能") {
        this.functionId = id;
      } else {
        this.terminalId = id;
      }
      this.listFilter(
        this.industryId,
        this.mapId,
        this.functionId,
        this.terminalId
      );
    },

    /* 列表筛选 */
    listFilter(id1,id2,id3,id4){
      const vm={
        id1:id1==0 ? '':id1,
        id2:id2==0 ? '':id2,
        id3:id3==0 ? '':id3,
        id4:id4==0 ?"0":id4,
      }
      var lis=this.bottomCenterAll.filter((item)=>{
        return Object.values(vm).every((key,index)=>{
          return item[Object.keys(vm)[index]].includes(key)
        })
      })
      if(lis.length==0){
        this.isShow=0
      }else{
        this.isShow=1
      }
      this.bottomCenter = lis
    },
    hoverVal(v) {
      this.isHover = v;
    },
  },
};
</script>
  
  <style lang="scss" scoped>
#NewsInformation {
  // height: 2000px;
}
.el-button {
  background: #9362e1;
  color: #fff;
  border-color: #9362e1;
}
.el-button:hover {
  background: #9362e154;
}
/* // 通用样式 start */
/* 筛选栏 */
.checkAll {
  width: 80%;
  max-width: 1400px;
  height: 100%;
  margin: 30px auto;
  .line {
    margin: 20px 0;
    display: flex;
    span {
      display:inline-block;
    }
    .title {
      color: #999999;
      margin-right: 50px;
    }
    .content {
      margin-right: 25px;
      cursor: pointer;
    }
  }
}
.colorSpan {
  color: #409eff;
}
/* 模板列表 */
.center {
  // display: flex;
  // flex-wrap: wrap;
  // justify-content: space-between;
  display: grid;
  grid-template-columns: 32% 32% 32%;
  grid-gap: 20px;
  .card {
    width: 100%;
    height: 500px;
    .top {
      width: 100%;
      height: 300px;
      border-radius: 10px;
      margin-bottom: 20px;
      position: relative;
      .cover {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        text-align: center;
        background: #fff;
        opacity: 0;
        transform: scale(0);
      }
      img {
        width: 100%;
        height: 100%;
      }
      img:hover .cover {
        opacity: 0.4;
        transform: scale(1);
      }
    }
    .bottom {
      p {
        font-size: 18px;
        line-height: 20px;
      }
      span {
        // height: 100px;
        color: #999999;
        font-size: 12px;
        // margin-bottom: 20px;
        margin-right: 10px;
      }
    }
    .tag_dail {
      display: flex;
      justify-content: space-between;
      align-items: center;
      .left {
        color: black;
      }
      .right {
        color: #c9c6c699;
        font-size: 10px;
      }
    }
  }
}
</style>