拆分table-filter组件

src/components/table-filter.vue

+<template>
+  <ul
+    class="ces_filter_container"
+    ref="filterContainer"
+    v-if="filterList && filterData && filterToggle"
+    v-show="show"
+  >
+    <li v-for="(item, index) in filterList" :key="'f_l_' + index">
+      <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"
+          :style="{
+            'margin-top': i < filterLength ? '0' : '10px',
+          }"
+        >
+          <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>
+</template>
+
+<script>
+export default {
+  props: {
+    filterList: {
+      type: Array,
+      default: [],
+    },
+    show: {
+      type: Boolean,
+      default: false,
+    },
+  },
+  data: () => ({
+    filterData: null, // 筛选条件
+    filterToggle: null, // 控制筛选条件的展开和收起
+    filterLength: 0, // 每行最多可容纳多少个过滤条件
+  }),
+  watch: {
+    filterList: {
+      handler(val) {
+        this.initFilterData();
+      },
+      deep: true,
+    },
+    show(value) {
+      if (value) {
+        this.getFilterLength();
+      }
+    },
+  },
+  methods: {
+    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);
+        });
+      }
+    },
+    getFilterLength() {
+      if (this.show) {
+        this.$nextTick(() => {
+          let width =
+            this.$refs.filterContainer.getBoundingClientRect().width -
+            20 * 2 - // 两侧padding
+            100 - // 左侧标题
+            20 - // 距左侧标题的边距
+            110; // 折叠按钮的宽度
+
+          this.filterLength = Math.floor(width / 110);
+          // console.log("每行最多可容纳" + this.filterLength + "个filter");
+        });
+      }
+    },
+    filterToggleAction(prop) {
+      this.$set(this.filterToggle, prop, !this.filterToggle[prop]);
+    },
+    isCurrentFilter(prop, filter) {
+      return (
+        this.filterData &&
+        this.filterData[prop] &&
+        this.filterData[prop].indexOf(filter) > -1
+      );
+    },
+    selectFilter(prop, filter) {
+      if (this.isCurrentFilter(prop, filter)) {
+        this.filterData[prop].splice(this.filterData[prop].indexOf(filter), 1);
+      } else {
+        this.filterData[prop].push(filter);
+      }
+
+      this.$emit("filter-change", this.filterData);
+    },
+  },
+  mounted() {
+    this.initFilterData();
+
+    window.addEventListener("resize", this.getFilterLength);
+  },
+  destroyed() {
+    window.removeEventListener("resize", this.getFilterLength);
+  },
+};
+</script>
+
+<style scoped>
+.ces_filter_container {
+  background-color: #f7f8f9;
+  padding: 14px 19px;
+  border: 1px solid #e3e5ef;
+  border-radius: 6px;
+  margin: 0 0 10px;
+}
+.ces_filter_container > li {
+  display: flex;
+  justify-content: flex-start;
+  align-items: flex-start;
+  padding-top: 12px;
+}
+.ces_filter_container {
+  background-color: #f7f8f9;
+  padding: 14px 19px;
+  border: 1px solid #e3e5ef;
+  border-radius: 6px;
+  margin: 0 0 10px;
+}
+.ces_filter_container > li {
+  display: flex;
+  justify-content: flex-start;
+  align-items: flex-start;
+  padding-top: 12px;
+}
+.ces_filter_name {
+  width: 100px;
+  height: 30px;
+  flex-shrink: 0;
+  text-align: right;
+  font-size: 14px;
+  line-height: 30px;
+  font-weight: bold;
+  color: #1a2236;
+}
+.ces_filter_data {
+  width: calc(100% - 120px);
+  min-height: 42px;
+  padding-right: 110px;
+  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;
+}
+.ces_filter_data > li {
+  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;
+  width: 90px;
+  box-sizing: border-box;
+  border-radius: 12px;
+  text-align: center;
+  cursor: pointer;
+  font-size: 14px;
+  line-height: 30px;
+  color: #58617a;
+}
+.ces_filter_data > li > a.current {
+  background-color: #515fe7;
+  color: #f4f7fc;
+}
+</style>

src/components/table-um.vue

@@ -37,46 +37,11 @@
           class="ces_toolbar_inp"
         ></el-input>
       </div>
-      <ul
-        class="ces_filter_container"
-        ref="filterContainer"
-        v-if="filterList && filterData && filterToggle"
-        v-show="showFliterList"
-      >
-        <li v-for="(item, index) in filterList" :key="'f_l_' + index">
-          <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"
-            >
-              <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>
+      <v-apaas-table-filter 
+      :show="showFliterList" 
+      :filter-list="filterList"
+      @filter-change="filterChange"
+    ></v-apaas-table-filter>
       <el-table
         :data="selectedTabsPage"
         :size="size"
@@ -265,12 +230,14 @@ import tableSelect from "@/components/table-select";
 import helper from "@/services/helper";
 import DConfirm from "@/components/dialog-remove";
 import tableUmhref from "@/components/table-umhref";
+import tableFilter from "@/components/table-filter";
 export default {
   components: {
     "v-apaas-table-input": tableInput,
     "v-apaas-table-select": tableSelect,
     "v-apaas-table-umhref": tableUmhref,
     "d-confirm": DConfirm,
+    "v-apaas-table-filter": tableFilter
   },
   props: {
     // 表格型号：mini,medium,small
@@ -401,19 +368,10 @@ export default {
       search: "",
       times: null,
       showFliterList: false,
-      filterData: null, // 筛选条件
-      filterToggle: null, // 控制筛选条件的展开和收起
-      filterLength: 0, // 每行最多可容纳多少个过滤条件
     };
   },
   mounted() {
     this.getDataFromApiSync();
-    this.initFilterData();
-
-    window.addEventListener("resize", this.getFilterLength);
-  },
-  destroyed() {
-    window.removeEventListener("resize", this.getFilterLength);
   },
   watch: {
     refreshInit: {
@@ -429,12 +387,6 @@ export default {
       },
       deep: true,
     },
-    filterList: {
-      handler(val) {
-        this.initFilterData();
-      },
-      deep: true,
-    },
   },
   methods: {
     //本地删除
@@ -561,53 +513,12 @@ export default {
     getTableData() {
       return this.selectedTabsPage;
     },
-    isCurrentFilter(prop, filter) {
-      return (
-        this.filterData &&
-        this.filterData[prop] &&
-        this.filterData[prop].indexOf(filter) > -1
-      );
-    },
     filterAction() {
       this.showFliterList = !this.showFliterList;
-      this.getFilterLength();
-    },
-    getFilterLength() {
-      if (this.showFliterList) {
-        this.$nextTick(() => {
-          let width =
-            this.$refs.filterContainer.getBoundingClientRect().width -
-            20 * 2 - // 两侧padding
-            100 - // 左侧标题
-            20 - // 距左侧标题的边距
-            110; // 折叠按钮的宽度
-
-          this.filterLength = Math.floor(width / 110);
-          // 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);
-        });
-      }
-    },
-    selectFilter(prop, filter) {
-      if (this.isCurrentFilter(prop, filter)) {
-        this.filterData[prop].splice(this.filterData[prop].indexOf(filter), 1);
-      } else {
-        this.filterData[prop].push(filter);
-      }
-      console.log(this.filterData);
     },
+    filterChange(filter) {
+      console.log(filter);
+    }
   },
 };
 </script>
@@ -796,75 +707,6 @@ em {
   text-overflow: ellipsis;
   white-space: nowrap;
 }
-.ces_filter_container {
-  background-color: #f7f8f9;
-  padding: 14px 19px;
-  border: 1px solid #e3e5ef;
-  border-radius: 6px;
-  margin: 0 0 10px;
-}
-.ces_filter_container > li {
-  display: flex;
-  justify-content: flex-start;
-  align-items: flex-start;
-  padding-top: 12px;
-}
-.ces_filter_name {
-  width: 100px;
-  height: 30px;
-  flex-shrink: 0;
-  text-align: right;
-  font-size: 14px;
-  line-height: 30px;
-  font-weight: bold;
-  color: #1a2236;
-}
-.ces_filter_data {
-  width: calc(100% - 120px);
-  padding-right: 110px;
-  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;
-}
-.ces_filter_data > li {
-  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;
-  width: 90px;
-  box-sizing: border-box;
-  border-radius: 12px;
-  text-align: center;
-  cursor: pointer;
-  font-size: 14px;
-  line-height: 30px;
-  color: #58617a;
-}
-.ces_filter_data > li > a.current {
-  background-color: #515fe7;
-  color: #f4f7fc;
-}
 .ces_page_item {
   display: flex;
   justify-content: flex-end;

src/pages/fwglList.vue

@@ -6,7 +6,7 @@
         <el-breadcrumb-item>{{ pathName }}</el-breadcrumb-item>
       </el-breadcrumb>
     </div>
-    <div class="table_container">
+    <div class="main_container">
       <ces-table
         class="r_yhgl_table"
         size="mini"
@@ -468,14 +468,14 @@ export default {
 .list_container {
   padding: 0 20px;
 }
-.table_container {
+.main_container {
   height: calc(100% - 75px);
   padding: 15px 20px;
   border-radius: 10px;
   overflow: hidden;
   background-color: #fff;
 }
-.table_container .ces-table-page {
+.main_container .ces-table-page {
   margin-top: 42px;
 }
 </style>

src/pages/yyglList.vue

@@ -6,7 +6,7 @@
         <el-breadcrumb-item>{{ pathName }}</el-breadcrumb-item>
       </el-breadcrumb>
     </div>
-    <div class="table_container"></div>
+    <div class="main_container"></div>
   </div>
 </template>
 
@@ -44,14 +44,14 @@ export default {
 .list_container {
   padding: 0 20px;
 }
-.table_container {
+.main_container {
   height: calc(100% - 75px);
   padding: 15px 20px;
   border-radius: 10px;
   overflow: hidden;
   background-color: #fff;
 }
-.table_container .ces-table-page {
+.main_container .ces-table-page {
   margin-top: 42px;
 }
 </style>