up

src/components/table-um.vue

@@ -40,7 +40,7 @@
       <ul
         class="ces_filter_container"
         ref="filterContainer"
-        v-if="filterList && filterList.length"
+        v-if="filterList && filterData && filterToggle"
         v-show="showFliterList"
       >
         <li v-for="(item, index) in filterList" :key="'f_l_' + index">
@@ -48,13 +48,32 @@
             <span v-text="item.name + '：'"></span>
           </div>
           <ul class="ces_filter_data">
-            <li v-for="(v, i) in item.data" :key="'f_l_d_' + index + '_' + i">
+            <li
+              v-for="(v, i) in item.data"
+              :key="'f_l_d_' + index + '_' + i"
+              v-show="filterToggle[item.prop] || i <= filterLength"
+            >
               <a
                 :class="{ current: isCurrentFilter(item.prop, v) }"
                 @click.prevent="selectFilter(item.prop, v)"
                 v-text="v"
               ></a>
             </li>
+
+            <div
+              class="toggle_bar"
+              v-if="item.data.length > filterLength"
+              @click="filterToggleAction(item.prop)"
+            >
+              <span>{{ filterToggle[item.prop] ? "收起" : "展开" }}</span>
+              <i
+                :class="
+                  filterToggle[item.prop]
+                    ? 'el-icon-caret-bottom'
+                    : 'el-icon-caret-top'
+                "
+              ></i>
+            </div>
           </ul>
         </li>
       </ul>
@@ -159,7 +178,9 @@
               trigger="hover"
               :content="scope.row[item.prop]"
             >
-              <div slot="reference" class="overlit">{{scope.row[item.prop]}}</div>
+              <div slot="reference" class="overlit">
+                {{ scope.row[item.prop] }}
+              </div>
             </el-popover>
             <!-- others -->
             <span v-else>{{ scope.row[item.prop] }}</span>
@@ -342,8 +363,8 @@ export default {
     },
     showHeader: {
       type: Boolean,
-      default: true
-    }
+      default: true,
+    },
   },
   data() {
     return {
@@ -374,7 +395,9 @@ export default {
       search: "",
       times: null,
       showFliterList: false,
-      filterData: null,
+      filterData: null, // 筛选条件
+      filterToggle: null, // 控制筛选条件的展开和收起
+      filterLength: 0, // 每行最多可容纳多少个过滤条件
     };
   },
   mounted() {
@@ -540,16 +563,24 @@ export default {
             this.$refs.filterContainer.getBoundingClientRect().width -
             20 * 2 - // 两侧padding
             100 - // 左侧标题
-            20; // 距左侧标题的边距
-          console.log("每行最多可容纳" + Math.floor(width / 110) + "个filter");
+            20 - // 距左侧标题的边距
+            110; // 折叠按钮的宽度
+
+          this.filterLength = Math.floor(width / 110) - 1;
+          console.log("每行最多可容纳" + this.filterLength + "个filter");
         });
       }
     },
+    filterToggleAction(prop) {
+      this.$set(this.filterToggle, prop, !this.filterToggle[prop]);
+    },
     initFilterData() {
       if (this.filterList && this.filterList.length) {
         this.filterData = {};
+        this.filterToggle = {};
         this.filterList.forEach((item) => {
           this.$set(this.filterData, item.prop, []);
+          this.$set(this.filterToggle, item.prop, false);
         });
       }
     },
@@ -759,13 +790,16 @@ em {
 }
 .ces_filter_data {
   width: calc(100% - 120px);
+  padding-right: 110px;
+  box-sizing: border-box;
   margin-left: 20px;
   flex-grow: 1;
-  flex-wrap: wrap;
   display: inline-flex;
+  flex-wrap: wrap;
   justify-content: flex-start;
   align-items: flex-start;
   padding-bottom: 11px;
+  position: relative;
 }
 .ces_filter_container > li:not(:last-child) > .ces_filter_data {
   border-bottom: 1px solid #e9ecf3;
@@ -774,6 +808,16 @@ em {
   flex-shrink: 0;
   padding-right: 20px;
 }
+.ces_filter_data > .toggle_bar {
+  height: 30px;
+  position: absolute;
+  top: 0;
+  right: 0;
+  font-size: 14px;
+  line-height: 30px;
+  color: #0f2683;
+  cursor: pointer;
+}
 .ces_filter_data > li > a {
   display: block;
   height: 30px;

src/pages/fwglList.vue

@@ -15,7 +15,7 @@
         :autoAdd="false"
         :isDialog="true"
         :confirmOptions="confirmOptions"
-        :detailsUrl="detailsUrl"
+        detailsUrl="/servicedetail/"
         @primary-edit="editItem"
         @sold-out="soldOutItem"
         :emptyText="emptyText"
@@ -82,7 +82,7 @@ export default {
   },
   methods: {
     editItem(item) {
-      console.log(item);
+      this.$router.push("/serviceEdit");
     },
     soldOutItem(item) {
       console.log(item);