修复：AdvanceTable 组件异步获取列配置不生效的问题；🐛 #159 #160 #161

fix: the async configuration of columns not to take effect in AdvanceTable.vue;

src/components/table/advance/ActionColumns.vue

@@ -49,18 +49,16 @@
       checkedCounts(val) {
         this.checkAll = val === this.columns.length
         this.indeterminate = val > 0 && val < this.columns.length
+      },
+      columns(newVal, oldVal) {
+        if (newVal != oldVal) {
+          this.checkedCounts = newVal.length
+          this.formatColumns(newVal)
+        }
       }
     },
     created() {
-      this.$emit('update:visibleColumns', [...this.columns])
+      this.formatColumns(this.columns)
-      for (let col of this.columns) {
-        if (col.visible === undefined) {
-          this.$set(col, 'visible', true)
-        }
-        if (!col.visible) {
-          this.checkedCounts -= 1
-        }
-      }
     },
     methods: {
       onCheckChange(e, col) {
@@ -126,6 +124,16 @@
             conditions[col.dataIndex] = col.search.value
           })
         return conditions
+      },
+      formatColumns(columns) {
+        for (let col of columns) {
+          if (col.visible === undefined) {
+            this.$set(col, 'visible', true)
+          }
+          if (!col.visible) {
+            this.checkedCounts -= 1
+          }
+        }
       }
     }
   }

src/components/table/advance/AdvanceTable.vue

@@ -32,7 +32,7 @@
       </div>
     </div>
     <a-table
-      v-bind="{...$options.propsData, columns: visibleColumns, title: undefined, loading: false}"
+      v-bind="{...this.$props, columns: visibleColumns, title: undefined, loading: false}"
       :size="sSize"
       @expandedRowsChange="onExpandedRowsChange"
       @change="onChange"

src/components/table/advance/SearchArea.vue

@@ -7,7 +7,10 @@
           {{col.title}}:
         </template>
         <slot v-else-if="col.slots && col.slots.title" :name="col.slots.title"></slot>
-        <a-switch @change="onSwitchChange(col)" class="switch" v-model="col.search.value" size="small" checked-children="是" un-checked-children="否" />
+        <a-switch @change="onSwitchChange(col)" class="switch" v-model="col.search.value" size="small"
+                  :checked-children="(col.search.switchOptions && col.search.switchOptions.checkedText) || '是'"
+                  :un-checked-children="(col.search.switchOptions && col.search.switchOptions.uncheckedText) || '否'"
+        />
         <a-icon v-if="col.search.value !== undefined" class="close" @click="e => onCloseClick(e, col)" type="close-circle" theme="filled" />
       </div>
       <div v-else-if="col.dataType === 'time'" :class="['title', {active: col.search.value}]">
@@ -70,12 +73,14 @@
     props: ['columns', 'formatConditions'],
     inject: ['table'],
     created() {
-      this.columns.forEach(item => {
+      this.formatColumns(this.columns)
-        this.$set(item, 'search', {...item.search, visible: false, value: undefined, format: this.getFormat(item)})
-      })
-      console.log(this.columns)
     },
     watch: {
+      columns(newVal, oldVal) {
+        if (newVal != oldVal) {
+          this.formatColumns(newVal)
+        }
+      },
       searchCols(newVal, oldVal) {
         if (newVal.length != oldVal.length) {
           const newConditions = this.getConditions(newVal)
@@ -218,6 +223,11 @@
           return true
         }
         return false
+      },
+      formatColumns(columns) {
+        columns.forEach(item => {
+          this.$set(item, 'search', {...item.search, visible: false, value: undefined, format: this.getFormat(item)})
+        })
       }
     }
   }

src/mock/goods/index.js

@@ -48,4 +48,59 @@ Mock.mock(RegExp(`${process.env.VUE_APP_API_BASE_URL}/goods` + '.*'),'get', ({ur
       list: result
     }
   }
+})
+
+const columnsConfig = [
+  {
+    title: '商品名称',
+    dataIndex: 'name',
+    searchAble: true
+  },
+  {
+    title: '订单号',
+    dataIndex: 'orderId'
+  },
+  {
+    searchAble: true,
+    dataIndex: 'status',
+    dataType: 'select',
+    slots: {title: 'statusTitle'},
+    scopedSlots: {customRender: 'status'},
+    search: {
+      selectOptions: [
+        {title: '已下单', value: 1},
+        {title: '已付款', value: 2},
+        {title: '已审核', value: 3},
+        // {title: '已发货', value: 4}
+      ]
+    }
+  },
+  {
+    title: '发货',
+    searchAble: true,
+    dataIndex: 'send',
+    dataType: 'boolean',
+    scopedSlots: {customRender: 'send'}
+  },
+  {
+    title: '发货时间',
+    dataIndex: 'sendTime',
+    dataType: 'datetime'
+  },
+  {
+    title: '下单日期',
+    searchAble: true,
+    dataIndex: 'orderDate',
+    dataType: 'date',
+    visible: false
+  },
+  {
+    title: '审核时间',
+    dataIndex: 'auditTime',
+    dataType: 'time',
+  },
+]
+
+Mock.mock(`${process.env.VUE_APP_API_BASE_URL}/columns`, 'get', () => {
+  return columnsConfig
 })

src/pages/components/table/Table.vue

@@ -90,24 +90,19 @@
             searchAble: true,
             dataIndex: 'send',
             dataType: 'boolean',
-            scopedSlots: {customRender: 'send'}
+            scopedSlots: {customRender: 'send'},
-          },
+            search: {
-          {
+              switchOptions: {
-            title: '发货时间',
+                checkedText: '开',
-            dataIndex: 'sendTime',
+                uncheckedText: '关'
-            dataType: 'datetime'
+              }
-          },
+            }
-          {
-            title: '下单日期',
-            searchAble: true,
-            dataIndex: 'orderDate',
-            dataType: 'date'
           },
           {
             title: '审核时间',
             dataIndex: 'auditTime',
             dataType: 'time',
-          },
+          }
         ],
         dataSource: [],
         conditions: {}
@@ -115,6 +110,7 @@
     },
     created() {
       this.getGoodList()
+      this.getColumns()
     },
     methods: {
       getGoodList() {
@@ -129,8 +125,12 @@
           this.loading = false
         })
       },
+      getColumns() {
+        ds.goodsColumns().then(res => {
+          this.columns = res.data
+        })
+      },
       onSearch(conditions, searchOptions) {
-        console.log(conditions)
         console.log(searchOptions)
         this.page = 1
         this.conditions = conditions

src/services/api.js

@@ -6,4 +6,5 @@ module.exports = {
   LOGIN: `${BASE_URL}/login`,
   ROUTES: `${BASE_URL}/routes`,
   GOODS: `${BASE_URL}/goods`,
+  GOODS_COLUMNS: `${BASE_URL}/columns`,
 }

src/services/dataSource.js

@@ -1,8 +1,12 @@
-import {GOODS} from './api'
+import {GOODS, GOODS_COLUMNS} from './api'
 import {METHOD, request} from '@/utils/request'
 
 export async function goodsList(params) {
   return request(GOODS, METHOD.GET, params)
 }
 
-export default {goodsList}
+export async function goodsColumns() {
+  return request(GOODS_COLUMNS, METHOD.GET)
+}
+
+export default {goodsList, goodsColumns}