优化aitable

ui/packages/basic/AiTable.vue

@@ -91,66 +91,24 @@
 import moment from 'dayjs'
 import dict from "../../lib/js/dict"
 
-let renderSlot = {
-  functional: true,
-  props: {
-    row: Object,
-    render: Function,
-    index: Number,
-    column: {type: Object, default: null},
-  },
-  render: (h, data) => {
-    const params = {
-      row: data.props.row,
-      index: data.props.index
-    }
-
-    if (data.props.column) {
-      params.column = data.props.column
-    }
-
-    return data.props.render(h, params)
-  }
-}
-
 export default {
   name: 'AiTable',
+  model: {
+    prop: "tableData",
+    event: "change"
+  },
   props: {
-    colConfigs: Array,
-    tableData: Array,
-    current: {
-      type: Number,
-      default: 1
-    },
-    size: {
-      type: Number,
-      default: 10
-    },
-    isShowPagination: {
-      type: Boolean,
-      default: true
-    },
-    total: {
-      type: Number
-    },
-    layout: {
-      type: String,
-      default: 'slot,->, prev, pager, next, sizes, jumper'
-    },
-    stripe: {
-      type: Boolean,
-      default: true
-    },
-    loading: {
-      type: Boolean,
-      default: false
-    },
-    tooltipEffect: {
-      type: String
-    },
-    tableSize: {
-      type: String
-    },
+    colConfigs: {type: Array, required: true},
+    tableData: {type: Array, required: true, default: () => []},
+    current: {default: 1},
+    size: {default: 10},
+    isShowPagination: {type: Boolean, default: true},
+    total: Number,
+    layout: {type: String, default: 'slot,->, prev, pager, next, sizes, jumper'},
+    stripe: {type: Boolean, default: true},
+    loading: {type: Boolean, default: false},
+    tooltipEffect: String,
+    tableSize: String,
     tableRef: String,
     dict: {default: () => dict},
     pagerCount: {default: 5},
@@ -159,22 +117,37 @@ export default {
   data() {
     return {
       name: '',
-      chooseList: []
+      chooseList: [],
+      defaultPage: {}
+    }
+  },
+  components: {
+    renderSlot: {
+      functional: true,
+      props: {
+        row: Object,
+        render: Function,
+        index: Number,
+        column: {type: Object, default: null},
+      },
+      render: (h, data) => {
+        const params = {
+          row: data.props.row,
+          index: data.props.index
+        }
+        if (data.props.column) {
+          params.column = data.props.column
+        }
+        return data.props.render(h, params)
+      }
     }
   },
-  components: {renderSlot},
   computed: {
-    refName() {
-      return this.tableRef || `aiTable${new Date().getTime()}`
-    },
-    isShowBorder() {
-      return !!this.$attrs.border || this.$attrs.border === ''
-    },
-
-    isHasPaginationBtnsSlot() {
-      return this.$slots.paginationBtns
-    },
-
+    refName: v => v.tableRef || `aiTable${new Date().getTime()}`,
+    isShowBorder: v => !!v.$attrs.border || v.$attrs.border === '',
+    isHasPaginationBtnsSlot: v => v.$scopedSlots.paginationBtns,
+    isIndeterminate: v => v.chooseList.length > 0 && v.chooseList.length < v.tableData.length,
+    checkAll: v => v.chooseList.length == v.tableData.length && v.tableData !== 0,
     page() {
       return {
         current: this.current,
@@ -183,17 +156,10 @@ export default {
         pagerCount: this.pagerCount
       }
     },
-    isIndeterminate() {
-      return this.chooseList.length > 0 && this.chooseList.length < this.tableData.length
-    },
-    checkAll() {
-      return this.chooseList.length == this.tableData.length && this.tableData !== 0
-    }
   },
   methods: {
     handleChange(e) {
       this.$emit('update:current', e)
-
       this.$nextTick(() => {
         this.$emit('getList')
       })
@@ -209,22 +175,13 @@ export default {
       this.$emit('handleSelectionChange', e)
     },
     getValue(colConfig, row) {
-      if (this.isFunction(colConfig.formart)) {
-        return colConfig.formart.call(this, row[colConfig.prop])
+      if (this.isFunction(colConfig.format)) {
+        return colConfig.format.call(this, row[colConfig.prop])
       }
-
       if (colConfig.dateFormat) {
         return moment(row[colConfig.prop]).format(colConfig.dateFormat)
       }
-
-      return this.isInvalidValue(row[colConfig.prop])
-    },
-    isInvalidValue(value) {
-      if (value === null || value === undefined || value === '') {
-        return '-'
-      }
-
-      return value
+      return row[colConfig.prop]|| "-"
     },
     isFunction(fun) {
       return typeof fun === 'function'
@@ -269,18 +226,18 @@ export default {
     color: $primaryColor;
   }
 
-  :deep( .ai-header__border .ai-table__header ){
+  :deep( .ai-header__border .ai-table__header ) {
     border-bottom: 1px solid $borderColor !important;
     border-right: 1px solid $borderColor !important;
   }
 
-  :deep( .el-table--border ){
+  :deep( .el-table--border ) {
     border: 1px solid $borderColor;
     border-right: none;
     border-bottom: none;
   }
 
-  :deep( .el-table ){
+  :deep( .el-table ) {
     color: #222;
 
     .caret-wrapper {
@@ -300,11 +257,11 @@ export default {
     }
   }
 
-  :deep( .cell ){
+  :deep( .cell ) {
     line-height: 24px;
   }
 
-  :deep( .el-table__header ){
+  :deep( .el-table__header ) {
     th {
       padding: 8px 0;
     }
@@ -322,13 +279,13 @@ export default {
     }
   }
 
-  :deep( .el-table__body ){
+  :deep( .el-table__body ) {
     tr td:first-child .cell {
       padding-left: 40px !important;
     }
   }
 
-  :deep( .el-table__fixed-right ){
+  :deep( .el-table__fixed-right ) {
     .el-table__body {
       tr td:first-child .cell {
         padding-left: 0 !important;
@@ -337,12 +294,12 @@ export default {
     }
   }
 
-  :deep( .ai-table__header ){
+  :deep( .ai-table__header ) {
     border-bottom: none;
     background: #F3F4F5;
   }
 
-  :deep(.el-pager ){
+  :deep(.el-pager ) {
     li.active + li {
       border-left: 1px solid $borderColor;
     }
@@ -374,7 +331,7 @@ export default {
         gap: 8px;
         color: $primaryColor !important;
 
-        :deep( span), :deep( div ){
+        :deep( span), :deep( div ) {
           font-size: 12px;
           cursor: pointer;
           color: $primaryColor !important;
@@ -403,7 +360,7 @@ export default {
         line-height: 1 !important;
       }
 
-      :deep(.el-checkbox ){
+      :deep(.el-checkbox ) {
         display: flex;
         align-items: center;
 
@@ -427,7 +384,7 @@ export default {
 }
 
 .ai-table__noborder {
-  :deep( .el-table td), :deep( .el-table th.is-center ){
+  :deep( .el-table td), :deep( .el-table th.is-center ) {
     border: none;
   }
 
@@ -435,11 +392,11 @@ export default {
     display: none;
   }
 
-  :deep( .el-table--striped .el-table__body tr.el-table__row--striped td ){
+  :deep( .el-table--striped .el-table__body tr.el-table__row--striped td ) {
     background: #F5F6F9;
   }
 
-  :deep( .el-table__fixed-right::before), :deep( .el-table__fixed::before ){
+  :deep( .el-table__fixed-right::before), :deep( .el-table__fixed::before ) {
     display: none;
   }
 }