优化表格筛选

src/components/side-nav-bar.vue

 <template>
   <div class="side_nav_bar">
-    <h3 class="side_nav_bar_title">
-      <img :src="require('../assets/imgs/tool_fuwu.png')" width="20" style="margin-right: 10px;" />
+    <h3 class="side_nav_bar_title" @click="titleAction">
+      <img
+        :src="require('../assets/imgs/tool_fuwu.png')"
+        width="20"
+        style="margin-right: 10px;"
+      />
       <span v-text="title"></span>
     </h3>
     <ul class="side_nav_bar_list">
@@ -25,6 +29,10 @@ export default {
       type: String,
       default: () => "我的服务",
     },
+    titlePath: {
+      type: String,
+      default: () => "",
+    },
     navList: {
       type: Array,
       default: () => [],
@@ -34,6 +42,11 @@ export default {
     navAction(nav) {
       this.$router.push(nav.path);
     },
+    titleAction() {
+      if (this.titlePath) {
+        this.$router.push(this.titlePath);
+      }
+    },
   },
 };
 </script>
@@ -51,6 +64,7 @@ export default {
   display: flex;
   justify-content: center;
   align-items: center;
+  cursor: pointer;
 }
 .side_nav_bar_title > span {
   font-size: 16px;

src/components/table-um.vue

@@ -51,7 +51,7 @@
             <li
               v-for="(v, i) in item.data"
               :key="'f_l_d_' + index + '_' + i"
-              v-show="filterToggle[item.prop] || i <= filterLength"
+              v-show="filterToggle[item.prop] || i < filterLength"
             >
               <a
                 :class="{ current: isCurrentFilter(item.prop, v) }"
@@ -65,7 +65,7 @@
               v-if="item.data.length > filterLength"
               @click="filterToggleAction(item.prop)"
             >
-              <span>{{ filterToggle[item.prop] ? "收起" : "展开" }} {{item.data.length + "-" + filterLength}}</span>
+              <span>{{ filterToggle[item.prop] ? "收起" : "展开" }}</span>
               <i
                 :class="
                   filterToggle[item.prop]
@@ -403,6 +403,11 @@ export default {
   mounted() {
     this.getDataFromApiSync();
     this.initFilterData();
+
+    window.addEventListener("resize", this.getFilterLength);
+  },
+  destroyed() {
+    window.removeEventListener("resize", this.getFilterLength);
   },
   watch: {
     refreshInit: {
@@ -556,7 +561,9 @@ export default {
     },
     filterAction() {
       this.showFliterList = !this.showFliterList;
-
+      this.getFilterLength();
+    },
+    getFilterLength() {
       if (this.showFliterList) {
         this.$nextTick(() => {
           let width =
@@ -566,8 +573,8 @@ export default {
             20 - // 距左侧标题的边距
             110; // 折叠按钮的宽度
 
-          this.filterLength = Math.floor(width / 110) - 1;
-          console.log("每行最多可容纳" + this.filterLength + "个filter");
+          this.filterLength = Math.floor(width / 110);
+          // console.log("每行最多可容纳" + this.filterLength + "个filter");
         });
       }
     },

src/pages/fwgl.vue

 <template>
   <div class="fwgl_container">
-    <side-nav-bar :nav-list="navList"></side-nav-bar>
+    <side-nav-bar :nav-list="navList" title-path="/fwgl"></side-nav-bar>
     <div class="main_container">
       <router-view
         :key="'type_' + $route.params && $route.params.type"
@@ -20,8 +20,6 @@ export default {
     navList: [],
     userLevel: 0,
   }),
-  computed: {},
-  methods: {},
   mounted() {
     this.navList = [
       // 普通用户
@@ -81,11 +79,6 @@ export default {
 
     this.$router.push(this.navList[0].path);
   },
-  /* updated() {
-    if (this.$route.params && this.$route.params.type === undefined) {
-      this.$router.push(this.navList[0].path);
-    }
-  }, */
 };
 </script>
 

src/pages/fwglList.vue

@@ -82,7 +82,7 @@ export default {
   },
   methods: {
     editItem(item) {
-      this.$router.push("/serviceEdit");
+      this.$router.push("/fwgl/serviceedit/" + item.id);
     },
     soldOutItem(item) {
       console.log(item);

src/router/index.js

@@ -59,7 +59,7 @@ export default new Router({
               component: () => import("@/pages/serviceDetail"),
             },
             {
-              path: "/fwgl/serviceedit",
+              path: "/fwgl/serviceedit/:id",
               name: "serviceedit",
               component: () => import("@/pages/serviceEdit"),
             },