fixed(advanced-table): setParams bug

demo/components/advanceTableDemo.vue

@@ -18,7 +18,7 @@
           <n-advance-table
             :columns="columns0"
             :data="data"
-            :rowCls="rowCls"
+            :row-cls="rowCls"
           >
             <template #table-operation>
               <n-button>custom operation by v-slot:table-operation</n-button>
@@ -699,7 +699,7 @@ export default {
           <div class="n-doc-section__view">
             <n-advance-table
               ref="table"
-              :columns="columns3"
+              :columns="columns4"
               :data="data"
               max-height="300px"
               :on-change="onChange1"
@@ -743,9 +743,56 @@ methods:{
 
 <script>
 import docCodeEditorMixin from './docCodeEditorMixin'
+const _columns3 = ($this) => {
+  return [
+    {
+      title: 'Name',
+      key: 'name',
+      filterMultiple: false,
+      filterItems: $this.filterItems,
+      onFilter: (value, record) => {
+        return value.includes(record.name + '')
+      }
+    },
+    {
+      title: 'Age',
+      key: 'age',
+      sortable: 'custom',
+      filterMultiple: true,
+      filterItems: [{
+        label: '14',
+        value: 14
+      }, {
+        label: '15',
+        value: 15
+      }],
+      onFilter: (value, record) => {
+        return true
+      },
+      render: (h, params) => {
+        return <b>{params.row.age}</b>
+      }
+    },
+    {
+      title: '#',
+      render: (h, params) => {
+        return (
+          <n-button
+            style="margin:0;"
+            size="small"
+            onClick={() => this.handleClick(params)}
+          >
+                delete
+          </n-button>
+        )
+      }
+    }
+  ]
+}
 export default {
   mixins: [docCodeEditorMixin],
   data () {
+    let columns4 = _columns3(this)
     let d = new Array(20).fill(0)
     d = d.map((item, idx) => {
       return {
@@ -773,9 +820,7 @@ export default {
           { label: 'Name',
             value: 'name' }
         ],
-        onSearch: (key, word, row) => {
-          return row.name.includes(word)
-        }
+        onSearch: 'custom'
       },
       columns: [
         {
@@ -1004,16 +1049,35 @@ export default {
             )
           }
         }
-      ]
+      ],
+      filterItems:
+      [{
+        label: '14',
+        value: 14
+      }, {
+        label: '15',
+        value: 15
+      }]
+    }
+  },
+  computed: {
+    columns4 () {
+      return _columns3(this)
     }
   },
   mounted () {
     setTimeout(() => {
       this.count = 80
+      this.filterItems = [
+        {
+          label: 'hahah',
+          value: 1
+        }
+      ]
     }, 3000)
     // this.$refs.table.setParams({ page: +this.$route.query.page || 5 })
 
-    // this.$refs.table.setParams({ filter: { age: [14] }, sorter: { key: 'age', type: -1 }, searcher: { key: 'name', value: 'xiaobai' }, page: 2 })
+    this.$refs.table.setParams({ filter: { age: [14] }, sorter: { key: 'age', type: -1 }, searcher: { key: 'name', value: 'xiaobai' }, page: 2 })
   },
   methods: {
     handleClick (params) {

packages/common/AdvanceTable/filterDropDown/index.vue

@@ -93,21 +93,12 @@ export default {
     }
   },
   watch: {
-    checkedIndexs: {
-      handler () {
-        let res = []
-        Object.keys(this.checkedIndexs).forEach((key) => {
-          if (this.checkedIndexs[key].isChecked === true) {
-            let index = this.checkedIndexs[key].index
-            res.push(this.filterItems[index].value)
-          }
-        })
-        res = res.length ? res : null
-        this.emitData = res
-        this.$emit('on-filter', { key: this.filterKey, value: res, filterFn: this.filterFn })
-      },
-      deep: true
-    },
+    // checkedIndexs: {
+    //   handler () {
+
+    //   },
+    //   deep: true
+    // },
     filterItems () {
       const checkedIndexs = {}
       this.filterItems.forEach((item, index) => {
@@ -117,10 +108,23 @@ export default {
     }
   },
   methods: {
+    emitFilter () {
+      let res = []
+      Object.keys(this.checkedIndexs).forEach((key) => {
+        if (this.checkedIndexs[key].isChecked === true) {
+          let index = this.checkedIndexs[key].index
+          res.push(this.filterItems[index].value)
+        }
+      })
+      res = res.length ? res : null
+      this.emitData = res
+      this.$emit('on-filter', { key: this.filterKey, value: res, filterFn: this.filterFn })
+    },
     setCheckedIndexs (arr) {
       arr.forEach(value => {
         this.checkedIndexs[value].isChecked !== undefined && Vue.set(this.checkedIndexs[value], 'isChecked', true)
       })
+      this.emitFilter()
     },
     reset () {
       Object.keys(this.checkedIndexs).forEach((key) => {
@@ -136,7 +140,7 @@ export default {
       !this.filterMultiple && this.reset()
       // this.checkedIndexs[item.value] = !isChecked
       Vue.set(this.checkedIndexs[item.value], 'isChecked', !isChecked)
-
+      this.emitFilter()
       // this.checkedIndexs[item.value] = !isChecked
 
       // if (!this.filterMultiple) {

packages/common/AdvanceTable/src/main.vue

@@ -391,7 +391,6 @@ export default {
     },
     currentSearchColumn () {
       this.searchData = this.computeShowingData()
-      console.log('currentSearchColumn')
     },
     currentSortColumn () {
       this.searchData = this.computeShowingData()
@@ -401,7 +400,6 @@ export default {
       handler () {
         this.searchData = this.computeShowingData()
         console.log('currentFilterColumn')
-
         // because after filter length maybe change , so need to reset current page
         this.currentPage = 1
       },
@@ -418,6 +416,7 @@ export default {
     console.log(this.wrapperWidth, this.tbodyWidth)
 
     this.init()
+
     // window.addEventListener('resize', this.init)
   },
   beforeDestroy () {
@@ -462,7 +461,11 @@ export default {
         ref.setCheckedIndexs(filter[key])
       })
       searcher && this.$refs.search.setSearch(searcher)
-      if (page) { this.currentPage = page }
+      if (page) {
+        this.$nextTick(() => {
+          this.currentPage = page
+        })
+      }
       // TODO:测试功能 有远程 无远程 ，半有半无
     },
     onBodyScrolll (event) {
@@ -490,8 +493,6 @@ export default {
       })
     },
     handleSearch ({ key, word }) {
-      console.log(key, word)
-
       this.currentSearchColumn = {
         key,
         word
@@ -615,6 +616,7 @@ export default {
         // remote filter
         this.useRemoteChange()
       }
+      console.log('on-filter')
     },
     onSortTypeChange ({ i, sortable, key, type, column }) {
       this.currentSortColumn = {