用户停留页面类型支持多选

src/views/Ranking/UserStayRanking.vue

@@ -10,10 +10,19 @@
         <el-button
           v-for="(cur, ind) in tabs.btns"
           :key="ind"
-          :class="cur == btnFocus ? 'btnFocus' : ''"
+          :class="btnFocus.includes(cur) ? 'btnFocus' : ''"
           @click="handleClick(cur)"
           >{{ cur }}</el-button
         >
+        <el-checkbox
+          v-if="tabs.btns.length"
+          v-model="checkedAll"
+          label="全选"
+          size="large"
+          border
+          @change="handleCheck"
+          class="checkAll"
+        />
       </el-row>
     </div>
     <div class="card-rank">
@@ -37,12 +46,13 @@ export default {
   data() {
     return {
       activeName: 1,
-      btnFocus: "",
+      btnFocus: [],
       tabs: {
         name: "用户停留排行",
         btns: [],
       },
       tableData: [],
+      checkedAll: false,
     };
   },
   mounted() {
@@ -50,7 +60,18 @@ export default {
   },
   methods: {
     handleClick(e) {
-      this.btnFocus = e;
+      if (this.btnFocus.includes(e) && this.btnFocus.length !== 1) {
+        this.btnFocus = this.btnFocus.filter((v) => {
+          return v !== e;
+        });
+        this.checkedAll = false;
+      } else if (!this.btnFocus.includes(e)) {
+        this.btnFocus.push(e);
+      }
+      this.setTableData();
+    },
+    handleCheck() {
+      this.btnFocus = this.checkedAll ? this.tabs.btns : [];
       this.setTableData();
     },
     setTableData() {
@@ -58,10 +79,10 @@ export default {
       this.tableData = [];
       this.curPage = 0;
       this.load = ElLoading.default.service();
-      getCategoryCnt({ type: this.btnFocus })
+      getCategoryCnt({ types: this.btnFocus })
         .then((res) => {
           that.total = res.length;
-          that.tableData = res.filter(v=>v.category_name==this.btnFocus);
+          that.tableData = res;
           that.load.close();
         })
         .catch((err) => {
@@ -74,7 +95,7 @@ export default {
       getCategoryType()
         .then((res) => {
           const [item] = res;
-          that.btnFocus = item;
+          that.btnFocus = [item];
           that.tabs.btns = res;
           that.setTableData();
         })
@@ -118,8 +139,14 @@ h4 {
   background: #f5f7fa !important;
 }
 .btnFocus {
-  color:#FFF !important;
-  border-color:#409eff !important;
-  background-color:#409eff !important;
+  color: #fff !important;
+  border-color: #409eff !important;
+  background-color: #409eff !important;
+}
+.groupType .el-button {
+  margin-bottom: 5px;
+}
+.checkAll{
+  margin-left: 10px;
 }
 </style>