服务管理筛选组件优化

src/components/table/table-filter.vue

 <template>
   <ul
     class="ces_filter_container"
-    ref="filterContainer"
     v-if="filterList && filterData && filterToggle"
     v-show="show"
   >
@@ -9,41 +8,34 @@
       <div class="ces_filter_name">
         <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"
-          v-show="filterToggle[item.prop] || i < filterLength"
+      <ul
+        class="ces_filter_data"
+        :ref="'filterList_' + index"
         :style="{
-            'margin-top': i < filterLength ? '0' : '10px',
+          height: filterToggle[item.prop] ? '' : '42px',
         }"
       >
+        <li v-for="(v, i) in item.data" :key="'f_l_d_' + index + '_' + i">
           <a
             class="text_clip"
             :class="{ current: isCurrentFilter(item.prop, v) }"
             @click.prevent="selectFilter(item.prop, v)"
-          >
-            <el-tooltip
-              effect="dark"
-              :content="v.name"
-              placement="top"
           >
             <span v-text="v.name"></span>
-            </el-tooltip>
           </a>
         </li>
 
         <div
           class="toggle_bar"
-          v-if="item.data.length > filterLength"
           @click="filterToggleAction(item.prop)"
+          v-if="showToggleBar[index]"
         >
           <span>{{ filterToggle[item.prop] ? "收起" : "展开" }}</span>
           <i
             :class="
               filterToggle[item.prop]
-                ? 'el-icon-caret-bottom'
-                : 'el-icon-caret-top'
+                ? 'el-icon-caret-top'
+                : 'el-icon-caret-bottom'
             "
           ></i>
         </div>
@@ -67,7 +59,7 @@ export default {
   data: () => ({
     filterData: null, // 筛选条件
     filterToggle: null, // 控制筛选条件的展开和收起
-    filterLength: 0, // 每行最多可容纳多少个过滤条件
+    showToggleBar: [],
   }),
   watch: {
     filterList: {
@@ -78,7 +70,7 @@ export default {
     },
     show(value) {
       if (value) {
-        this.getFilterLength();
+        this.resizePage();
       }
     },
   },
@@ -93,18 +85,21 @@ export default {
         });
       }
     },
-    getFilterLength() {
+    resizePage() {
       if (this.show) {
         this.$nextTick(() => {
-          let width =
-            this.$refs.filterContainer.getBoundingClientRect().width -
-            20 * 2 - // 两侧padding
-            100 - // 左侧标题
-            20 - // 距左侧标题的边距
-            110; // 折叠按钮的宽度
+          this.showToggleBar = [];
+          this.filterList.forEach((item, index) => {
+            let filterList = this.$refs["filterList_" + index][0];
+            let width = filterList.getBoundingClientRect().width - 100;
+            let totalWidth = 0;
+
+            filterList.querySelectorAll("li").forEach((v, i) => {
+              totalWidth += v.getBoundingClientRect().width;
+            });
 
-          this.filterLength = Math.floor(width / 150);
-          // console.log("每行最多可容纳" + this.filterLength + "个filter");
+            this.showToggleBar.push(totalWidth > width);
+          });
         });
       }
     },
@@ -131,10 +126,10 @@ export default {
   mounted() {
     this.initFilterData();
 
-    window.addEventListener("resize", this.getFilterLength);
+    window.addEventListener("resize", this.resizePage);
   },
   destroyed() {
-    window.removeEventListener("resize", this.getFilterLength);
+    window.removeEventListener("resize", this.resizePage);
   },
 };
 </script>
@@ -165,24 +160,22 @@ export default {
 .ces_filter_data {
   width: calc(100% - 120px);
   min-height: 42px;
-  padding-right: 110px;
+  padding-right: 100px;
   box-sizing: border-box;
   margin-left: 20px;
   flex-grow: 1;
-  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;
+  overflow: hidden;
+  font-size: 0;
 }
 .ces_filter_data > li {
-  flex-shrink: 0;
+  display: inline-block;
+  vertical-align: middle;
   padding-right: 20px;
 }
+.ces_filter_container > li:not(:last-child) > .ces_filter_data {
+  border-bottom: 1px solid #e9ecf3;
+}
 .ces_filter_data > .toggle_bar {
   height: 30px;
   position: absolute;
@@ -193,10 +186,12 @@ export default {
   color: #0f2683;
   cursor: pointer;
 }
+.ces_filter_data > li {
+  margin-bottom: 10px;
+}
 .ces_filter_data > li > a {
   display: block;
   height: 30px;
-  width: 130px;
   padding: 0 15px;
   box-sizing: border-box;
   border-radius: 12px;