feat: 添加表格过滤字段选项 (#527)

* feat: 添加表格过滤字段选项

* fix: 如果已有Filter的情况下去掉过滤

Co-authored-by: Orange <orangemtony@gmail.com>

src/components/AutoDataTable/index.vue

@@ -118,6 +118,43 @@ export default {
       }
       return col
     },
+    addFilterIfNeed(col) {
+      if (col.prop) {
+        const column = this.meta[col.prop] || {}
+        if (!column.filter) {
+          return col
+        }
+        if (column.type === 'boolean') {
+          col.filters = [
+            { text: this.$t('common.Yes'), value: true },
+            { text: this.$t('common.No'), value: false }
+          ]
+          col.sortable = false
+          col.filterMethod = function(value, row, column) {
+            const property = column['property']
+            return row[property] === value
+          }
+        }
+        if (column.type === 'choice' && column.choices) {
+          col.filters = column.choices.map(item => {
+            if (typeof (item.value) === 'boolean') {
+              if (item.value) {
+                return { text: item.display_name, value: 'True' }
+              } else {
+                return { text: item.display_name, value: 'False' }
+              }
+            }
+            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
+          }
+        }
+      }
+      return col
+    },
     generateColumn(name) {
       const colMeta = this.meta[name] || {}
       const customMeta = this.config.columnsMeta ? this.config.columnsMeta[name] : {}
@@ -127,6 +164,7 @@ export default {
       col = this.generateColumnByType(colMeta.type, col)
       col = Object.assign(col, customMeta)
       col = this.addHelpTipsIfNeed(col)
+      col = this.addFilterIfNeed(col)
       return col
     },
     generateColumns() {

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

@@ -95,6 +95,8 @@
             v-for="col in columns"
             :key="col.prop"
             :formatter="typeof col.formatter === 'function' ? col.formatter : null"
+            :filters="col.filters || null"
+            :filter-method="typeof col.filterMethod === 'function' ? col.filterMethod : null"
             v-bind="{align: columnsAlign, ...col}"
           >
             <template v-if="col.formatter && typeof col.formatter !== 'function'" v-slot:default="{row, column, index}">

src/styles/index.scss

@@ -153,3 +153,7 @@ input[type=file] {
   width: 100%;
   table-layout: fixed !important;
 }
+
+.el-table__column-filter-trigger i {
+  color: #c0c4cc !important;
+}