fix(advanced-table): change filter items to computed for async get items data

demo/components/advanceTableDemo.vue

@@ -1,8 +1,6 @@
 <template>
-  <div
-    ref="doc"
-    class="n-doc"
-  >
+  <div ref="doc"
+class="n-doc">
     <div class="n-doc-header">
       <n-gradient-text :font-size="20">
         AdvanceTable
@@ -15,10 +13,8 @@
           Basic use
         </div>
         <div class="n-doc-section__view">
-          <n-advance-table
-            :columns="columns0"
-            :data="data"
-          >
+          <n-advance-table :columns="columns0"
+:data="data">
             <template #table-operation>
               <n-button>custom operation by v-slot:table-operation</n-button>
             </template>
@@ -796,7 +792,7 @@ export default {
             value: 15
           }],
           onFilter: (value, record) => {
-            return value.includes(record.age)
+            return value.includes(record.age + '')
             // switch (value) {
             //   case 14:
             //     return record.age <= value
@@ -889,11 +885,11 @@ export default {
             value: 15
           }],
           onFilter: (value, record) => {
-            switch (value) {
+            switch (+value) {
               case 14:
-                return record.age <= value
+                return record.age <= +value
               case 15:
-                return record.age >= value
+                return record.age >= +value
             }
           },
           render: (h, params) => {
@@ -935,10 +931,10 @@ export default {
           filterMultiple: true,
           filterItems: [{
             label: '14',
-            value: '14'
+            value: 14
           }, {
             label: '15',
-            value: '15'
+            value: 15
           }],
           onFilter: (value, record) => {
             return value.includes(record.age + '')

package.json

@@ -1,6 +1,6 @@
 {
   "name": "naive-ui",
-  "version": "0.2.42",
+  "version": "0.2.43",
   "description": "",
   "main": "index.js",
   "scripts": {

packages/common/AdvanceTable/filterDropDown/index.vue

@@ -9,7 +9,7 @@
       >
         <span>{{ item.label }}</span>
         <n-icon
-          v-show="checkedIndexs[item.value]"
+          v-show="checkedIndexs[item.value] === true"
           type="md-checkmark"
           size="14"
         />
@@ -45,23 +45,27 @@ export default {
     }
   },
   data () {
+    const checkedIndexs = {}
+    this.filterItems.forEach((item) => {
+      checkedIndexs[item.value] = false
+    })
     return {
       // items,
-      emitData: null
-      // checkedIndexs
+      emitData: null,
+      checkedIndexs
     }
   },
   computed: {
     filterStatus () {
       return !!this.emitData
     },
-    checkedIndexs (val, oldVal) {
-      const checkedIndexs = {}
-      this.filterItems.forEach((item) => {
-        checkedIndexs[item.value] = false
-      })
-      return { checkedIndexs, ...oldVal }
-    },
+    // checkedIndexs (val, oldVal) {
+    //   const checkedIndexs = {}
+    //   this.filterItems.forEach((item) => {
+    //     checkedIndexs[item.value] = false
+    //   })
+    //   return { checkedIndexs, ...oldVal }
+    // },
     items () {
       let items = this.filterItems.map((item) => {
         return {
@@ -86,7 +90,13 @@ export default {
         this.$emit('on-filter', { key: this.filterKey, value: res, filterFn: this.filterFn })
       },
       deep: true
-
+    },
+    filterItems () {
+      const checkedIndexs = {}
+      this.filterItems.forEach((item) => {
+        checkedIndexs[item.value] = false
+      })
+      this.checkedIndexs = { checkedIndexs, ...this.checkedIndexs }
     }
   },
   methods: {
@@ -107,10 +117,9 @@ export default {
       // single select
       let isChecked = this.checkedIndexs[item.value]
       !this.filterMultiple && this.reset()
+      // this.checkedIndexs[item.value] = !isChecked
       Vue.set(this.checkedIndexs, item.value, !isChecked)
-      // this.$nextTick(() => {
-      //   this.$emit('on-filter', { key: this.filterKey, value: this.checkedIndexs })
-      // })
+
       // this.checkedIndexs[item.value] = !isChecked
 
       // if (!this.filterMultiple) {