fix: Filter使用后端搜索

src/components/AutoDataTable/index.vue

@@ -1,5 +1,5 @@
 <template>
-  <DataTable v-if="!loading" ref="dataTable" v-loading="loading" :config="iConfig" v-bind="$attrs" v-on="$listeners" />
+  <DataTable v-if="!loading" ref="dataTable" v-loading="loading" :config="iConfig" v-bind="$attrs" v-on="$listeners" @filter-change="filterChange" />
 </template>
 
 <script type="text/jsx">
@@ -15,6 +15,10 @@ export default {
     config: {
       type: Object,
       default: () => ({})
+    },
+    filterTable: {
+      type: Function,
+      default: () => ({})
     }
   },
   data() {
@@ -130,10 +134,7 @@ export default {
             { text: this.$t('common.No'), value: false }
           ]
           col.sortable = false
-          col.filterMethod = function(value, row, column) {
-            const property = column['property']
-            return row[property] === value
-          }
+          col['column-key'] = col.prop
         }
         if (column.type === 'choice' && column.choices) {
           col.filters = column.choices.map(item => {
@@ -147,10 +148,7 @@ export default {
             return { text: item.display_name, value: item.value }
           })
           col.sortable = false
-          col.filterMethod = function(value, row, column) {
-            const property = column['property']
-            return row[property] === value
-          }
+          col['column-key'] = col.prop
         }
       }
       return col
@@ -180,6 +178,12 @@ export default {
       }
       config.columns = columns
       this.iConfig = config
+    },
+    filterChange(filters) {
+      const key = Object.keys(filters)[0]
+      const attr = {}
+      attr[key] = filters[key][0]
+      this.filterTable(attr)
     }
   }
 }

src/components/DataTable/compenents/el-data-table/el-data-table.vue

@@ -11,6 +11,7 @@
         v-bind="tableAttrs"
         :data="data"
         :row-class-name="rowClassName"
+        v-on="$listeners"
         @selection-change="selectStrategy.onSelectionChange"
         @select="selectStrategy.onSelect"
         @select-all="selectStrategy.onSelectAll($event, canSelect)"
@@ -96,6 +97,7 @@
             :key="col.prop"
             :formatter="typeof col.formatter === 'function' ? col.formatter : null"
             :filters="col.filters || null"
+            :filter-multiple="false"
             :filter-method="typeof col.filterMethod === 'function' ? col.filterMethod : null"
             v-bind="{align: columnsAlign, ...col}"
           >

src/components/ListTable/index.vue

@@ -2,7 +2,7 @@
   <div>
     <TableAction :table-url="iTableConfig.url" :search-table="search" :date-pick="handleDateChange" v-bind="headerActions" :selected-rows="selectedRows" :reload-table="reloadTable" />
     <IBox class="table-content">
-      <AutoDataTable ref="dataTable" :config="iTableConfig" @selection-change="handleSelectionChange" v-on="$listeners" />
+      <AutoDataTable ref="dataTable" :filter-table="filter" :config="iTableConfig" @selection-change="handleSelectionChange" v-on="$listeners" />
     </IBox>
   </div>
 </template>
@@ -91,6 +91,9 @@ export default {
     search(attrs) {
       return this.dataTable.search(attrs, true)
     },
+    filter(attrs) {
+      this.$refs.dataTable.$refs.dataTable.search(attrs, true)
+    },
     handleDateChange(attrs) {
       this.$set(this.extraQuery, 'date_from', attrs[0].toISOString())
       this.$set(this.extraQuery, 'date_to', attrs[1].toISOString())
@@ -113,28 +116,28 @@ export default {
 
 <style lang="scss" scoped>
 
-  .table-content {
-    margin-top: 10px;
+.table-content {
+  margin-top: 10px;
 
-    & >>> .el-card__body {
-      padding: 0;
-    }
-    & >>> .el-table__header thead > tr > th {
-      background-color: white;
-    }
-
-    /*& >>> .el-table--striped .el-table__body tr.el-table__row--striped td {*/
-      /*background: white;*/
-    /*}*/
-
-    /*& >>> .el-table th, .el-table tr  {*/
-      /*background-color: red;*/
-      /*!*background-color: #FAFAFA;*!*/
-    /*}*/
+  & >>> .el-card__body {
+    padding: 0;
+  }
+  & >>> .el-table__header thead > tr > th {
+    background-color: white;
   }
 
-  //修改颜色
-  // .el-button--text{
-  //   color: #409EFF;
-  // }
+  /*& >>> .el-table--striped .el-table__body tr.el-table__row--striped td {*/
+  /*background: white;*/
+  /*}*/
+
+  /*& >>> .el-table th, .el-table tr  {*/
+  /*background-color: red;*/
+  /*!*background-color: #FAFAFA;*!*/
+  /*}*/
+}
+
+//修改颜色
+// .el-button--text{
+//   color: #409EFF;
+// }
 </style>