表格组件增加筛选条件

src/components/table-um.vue

@@ -3,6 +3,20 @@
     <!-- 数据表格 -->
     <section class="ces-table">
       <div class="ces_toolbar">
+        <el-button
+          v-if="filterList && filterList.length"
+          size="small"
+          style="float: left;"
+          @click="filterAction"
+        >
+          {{ showFliterList ? "收起" : "筛选" }}
+          <i
+            class="el-icon--right"
+            :class="
+              showFliterList ? 'el-icon-caret-bottom' : 'el-icon-caret-top'
+            "
+          ></i>
+        </el-button>
         <el-button
           v-if="addRowBtn"
           icon="el-icon-plus"
@@ -10,7 +24,8 @@
           type="primary"
           @click="addRow()"
           class="ces_toolbar_btn"
-        >新增</el-button>
+          >新增</el-button
+        >
         <el-input
           prefix-icon="el-icon-search"
           v-if="searchShow"
@@ -22,6 +37,27 @@
           class="ces_toolbar_inp"
         ></el-input>
       </div>
+      <ul
+        class="ces_filter_container"
+        ref="filterContainer"
+        v-if="filterList && filterList.length"
+        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">
+              <a
+                :class="{ current: isCurrentFilter(item.prop, v) }"
+                @click.prevent="selectFilter(item.prop, v)"
+                v-text="v"
+              ></a>
+            </li>
+          </ul>
+        </li>
+      </ul>
       <el-table
         :data="selectedTabsPage"
         :size="size"
@@ -34,49 +70,67 @@
         :stripe="stripe"
         row-key="id"
         default-expand-all
-        :tree-props="{children: 'children', hasChildren: 'hasChildren'}"
+        :tree-props="{ children: 'children', hasChildren: 'hasChildren' }"
         ref="cesTable"
-        :class="radius?'table_radius':''"
+        :class="radius ? 'table_radius' : ''"
         :header-cell-class-name="headerCellClassName"
         v-cloak
       >
-        <el-table-column v-if="isSelection" type="selection" align="center"></el-table-column>
+        <el-table-column
+          v-if="isSelection"
+          type="selection"
+          align="center"
+        ></el-table-column>
         <!-- 序号 -->
-        <el-table-column v-if="isIndex" type="index" :label="indexLabel" width="80" align="center"></el-table-column>
+        <el-table-column
+          v-if="isIndex"
+          type="index"
+          :label="indexLabel"
+          width="80"
+          align="center"
+        ></el-table-column>
 
         <!-- 数据栏 -->
         <el-table-column
-          v-for="(item,index) in headers"
+          v-for="(item, index) in headers"
           :key="index"
           :prop="item.prop"
           :label="item.label"
           :width="item.width"
           :align="item.align"
-          :render-header="item.require?renderHeader:null"
+          :render-header="item.require ? renderHeader : null"
         >
           <template slot-scope="scope">
             <!-- 操作按钮 -->
-            <span v-if="item.type==='Button'">
-              <b v-for="(btn,key) in item.btnList" :key="key">
+            <span v-if="item.type === 'Button'">
+              <b v-for="(btn, key) in item.btnList" :key="key">
                 <em
                   v-if="btn.label == '删除' || btn.label == '移除'"
                   :class="btn.type"
-                  @click="handleRemove(scope.row,btn.label)"
-                >{{btn.label}}</em>
-                <em v-else :class="btn.type" @click="handleClick(btn.type, scope.row)">{{btn.label}}</em>
-                <em v-if="btn.line" style="padding:0 20px;color:#edf0ff">{{btn.line}}</em>
+                  @click="handleRemove(scope.row, btn.label)"
+                  >{{ btn.label }}</em
+                >
+                <em
+                  v-else
+                  :class="btn.type"
+                  @click="handleClick(btn.type, scope.row)"
+                  >{{ btn.label }}</em
+                >
+                <em v-if="btn.line" style="padding:0 20px;color:#edf0ff">{{
+                  btn.line
+                }}</em>
               </b>
             </span>
             <!--href 链接-->
             <v-apaas-table-umhref
-              v-else-if="item.type =='href'"
+              v-else-if="item.type == 'href'"
               :header="item"
               :row="scope.row"
               :detailsUrl="detailsUrl"
             ></v-apaas-table-umhref>
             <!-- could edit -->
             <v-apaas-table-input
-              v-else-if="item.type==='input'"
+              v-else-if="item.type === 'input'"
               :item="helper.GetProperty(scope.row, item.prop)"
               :header="item.prop"
               :rowId="scope.$index"
@@ -85,7 +139,7 @@
             ></v-apaas-table-input>
             <!-- could select -->
             <v-apaas-table-select
-              v-else-if="item.type==='select'"
+              v-else-if="item.type === 'select'"
               :item="helper.GetProperty(scope.row, item.prop)"
               :header="item.prop"
               :rowId="scope.$index"
@@ -94,15 +148,17 @@
             ></v-apaas-table-select>
             <!-- popover -->
             <el-popover
-              v-else-if="item.type==='popover'"
+              v-else-if="item.type === 'popover'"
               placement="top-start"
               trigger="hover"
               :content="scope.row[item.prop]"
             >
-              <span slot="reference" class="overlit">{{scope.row[item.prop]}}</span>
+              <span slot="reference" class="overlit">{{
+                scope.row[item.prop]
+              }}</span>
             </el-popover>
             <!-- others -->
-            <span v-else>{{scope.row[item.prop]}}</span>
+            <span v-else>{{ scope.row[item.prop] }}</span>
           </template>
         </el-table-column>
       </el-table>
@@ -134,15 +190,20 @@
           circle
           size="mini"
           @click="handleCurrentChange(-1)"
-          :disabled="pagination.page==1"
+          :disabled="pagination.page == 1"
         ></el-button>
-        第{{ pagination.page }}页 / 共{{ Math.ceil(pagination.total / pagination.rowsPerPage) }}页
+        第{{ pagination.page }}页 / 共{{
+          Math.ceil(pagination.total / pagination.rowsPerPage)
+        }}页
         <el-button
           icon="el-icon-arrow-right"
           circle
           size="mini"
           @click="handleCurrentChange(1)"
-          :disabled="pagination.page==Math.ceil(pagination.total / pagination.rowsPerPage)"
+          :disabled="
+            pagination.page ==
+              Math.ceil(pagination.total / pagination.rowsPerPage)
+          "
         ></el-button>
       </div>
     </section>
@@ -169,7 +230,7 @@ export default {
     "v-apaas-table-input": tableInput,
     "v-apaas-table-select": tableSelect,
     "v-apaas-table-umhref": tableUmhref,
-    "d-confirm": DConfirm
+    "d-confirm": DConfirm,
   },
   props: {
     // 表格型号：mini,medium,small
@@ -194,31 +255,31 @@ export default {
     // },
     searchShow: {
       type: Boolean,
-      default: false
+      default: false,
     },
     url: {
       type: String,
-      default: ""
+      default: "",
     },
     detailsUrl: {
       type: String,
-      default: ""
+      default: "",
     },
     rowprop: {
       type: String,
-      default: ""
+      default: "",
     },
     ready: {
       type: Boolean,
-      default: false
+      default: false,
     },
     addRowBtn: {
       type: Boolean,
-      default: false
+      default: false,
     },
     couldNotEdit: {
       type: Boolean,
-      default: false
+      default: false,
     },
     // 是否显示删除弹窗
     isDialog: { type: Boolean, default: false },
@@ -229,48 +290,52 @@ export default {
           title: "提示", //提示
           message: "", //""
           btnCancelText: "取消", //取消
-          btnSubmitText: "确定"
+          btnSubmitText: "确定",
         };
-      }
+      },
     },
     refreshInit: { type: Boolean },
     sortBy: {
       type: String,
-      default: ""
+      default: "",
     },
     searchNoName: { type: Boolean, default: false },
     emptyText: {
       type: String,
-      default: "暂无数据"
+      default: "暂无数据",
     },
     autoAdd: {
       type: Boolean,
-      default: false
+      default: false,
     },
     border: {
       type: Boolean,
-      default: false
+      default: false,
     },
     stripe: {
       type: Boolean,
-      default: false
+      default: false,
     },
     radius: {
       type: Boolean,
-      default: false
+      default: false,
     },
     pageSizeShow: {
       type: Boolean,
-      default: false
+      default: false,
     },
     paginationShow: {
       type: Boolean,
-      default: false
+      default: false,
     },
     headerCellClassName: {
       type: String,
-      default: ""
-    }
+      default: "",
+    },
+    filterList: {
+      type: Array,
+      default: null,
+    },
   },
   data() {
     return {
@@ -278,7 +343,7 @@ export default {
       pagination: {
         rowsPerPage: 10,
         page: 1,
-        total: 0
+        total: 0,
       },
       delSelect: null,
       helper: helper,
@@ -287,23 +352,26 @@ export default {
       pageOptions: [
         {
           value: "10",
-          label: "10"
+          label: "10",
         },
         {
           value: "20",
-          label: "20"
+          label: "20",
         },
         {
           value: "50",
-          label: "50"
-        }
+          label: "50",
+        },
       ],
       search: "",
-      times: null
+      times: null,
+      showFliterList: false,
+      filterData: null,
     };
   },
   mounted() {
     this.getDataFromApiSync();
+    this.initFilterData();
   },
   watch: {
     refreshInit: {
@@ -311,14 +379,20 @@ export default {
         if (val) {
           this.getDataFromApiSync();
         }
-      }
+      },
     },
     url: {
       handler(val) {
         this.getDataFromApiSync();
       },
-      deep: true
-    }
+      deep: true,
+    },
+    filterList: {
+      handler(val) {
+        this.initFilterData();
+      },
+      deep: true,
+    },
   },
   methods: {
     // get data
@@ -334,14 +408,14 @@ export default {
         }
       } else {
         this.getDataFromApi().then(
-          data => {
+          (data) => {
             this.selectedTabsPage = JSON.parse(JSON.stringify(data.newArr));
             this.pagination.total = data.total;
             if (this.autoAdd) {
               this.addRow();
             }
           },
-          err => {
+          (err) => {
             console.log("失败" + err);
           }
         );
@@ -354,7 +428,7 @@ export default {
         this.all_url = `/static/data.json`;
         this.$http
           .get(this.all_url)
-          .then(response => {
+          .then((response) => {
             let newArr = response.data.data[this.url];
             // if it is true url, total is response's total
             let total = newArr.length;
@@ -403,7 +477,7 @@ export default {
       this.$message({
         showClose: true,
         message: this.label + "成功",
-        type: "success"
+        type: "success",
       });
     },
     switchChange(val) {
@@ -440,10 +514,48 @@ 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;
+
+      if (this.showFliterList) {
+        this.$nextTick(() => {
+          let width =
+            this.$refs.filterContainer.getBoundingClientRect().width -
+            20 * 2 - // 两侧padding
+            100 - // 左侧标题
+            20; // 距左侧标题的边距
+          console.log("每行最多可容纳" + Math.floor(width / 110) + "个filter");
+        });
+      }
+    },
+    initFilterData() {
+      if (this.filterList && this.filterList.length) {
+        this.filterData = {};
+        this.filterList.forEach((item) => {
+          this.$set(this.filterData, item.prop, []);
+        });
+      }
+    },
+    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);
+    },
+  },
 };
 </script>
+
 <style>
 .ces-table .el-table::before {
   height: 0 !important;
@@ -575,7 +687,9 @@ em {
 .ces_toolbar {
   position: absolute;
   top: -40px;
-  right: 20px;
+  right: 0;
+  left: 0;
+  text-align: right;
 }
 .ces_toolbar .ces_toolbar_btn {
   margin-right: 10px;
@@ -592,8 +706,8 @@ em {
   justify-content: space-between;
   align-items: center;
 }
-.ces_page_total {
-}
+/* .ces_page_total {
+} */
 .ces_page_num {
   width: 120px;
   display: flex;
@@ -611,4 +725,60 @@ em {
   text-overflow: ellipsis;
   white-space: nowrap;
 }
-</style>
\ No newline at end of file
+.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);
+  margin-left: 20px;
+  flex-grow: 1;
+  flex-wrap: wrap;
+  display: inline-flex;
+  justify-content: flex-start;
+  align-items: flex-start;
+  padding-bottom: 11px;
+}
+.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 > 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/pages/example_table.vue

@@ -20,6 +20,7 @@
       :emptyText="emptyText"
       :stripe="true"
       :pageSizeShow="true"
+      :filterList="filterList"
     ></ces-table>
     <h3>可编辑表格，供服务测试用</h3>
     <ces-table
@@ -114,7 +115,29 @@ export default {
     },
     emptyText: "暂时没数据",
     emptyText1: "可输入表格暂时没数据",
-    emptyText2: "树结构暂时没数据"
+    emptyText2: "树结构暂时没数据",
+    filterList: [
+      {
+        name: "服务类型",
+        prop: "fwlx",
+        data: ["数据服务", "时空服务", "视频服务", "感知服务", "综合服务"]
+      },
+      {
+        name: "服务领域",
+        prop: "fwly",
+        data: ["数据服务", "时空服务", "视频服务", "感知服务", "综合服务"]
+      },
+      {
+        name: "开放程度",
+        prop: "kfcd",
+        data: ["数据服务", "时空服务", "视频服务", "感知服务", "综合服务"]
+      },
+      {
+        name: "服务状态",
+        prop: "fwzt",
+        data: ["数据服务", "时空服务", "视频服务", "感知服务", "综合服务"]
+      },
+    ]
   }),
   components: {
     cesTable