[Update] 修改模板

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

@@ -98,19 +98,16 @@
             :formatter="typeof col.formatter === 'function' ? col.formatter : null"
             v-bind="{align: columnsAlign, ...col}"
           >
-            <template slot-scope="{row}">
+            <template v-if="col.formatter && typeof col.formatter !== 'function'" v-slot:default="{row}">
               <div
                 :is="col.formatter"
-                v-if="col.formatter && typeof col.formatter !== 'function'"
                 :key="row.id"
+                :setting="data"
                 :row="row"
                 :col="col"
                 :cell-value="row[col.prop]"
               >
               </div>
-              <template v-else>
-                {{ row[col.prop] }}
-              </template>
             </template>
           </el-data-table-column>
         </template>

src/components/DataTable/formatters/ActionsFormatter.vue

@@ -1,5 +1,5 @@
 <template>
-  <ActionsGroup :size="'mini'" :actions="actions" @actionClick="handleActionClick"></ActionsGroup>
+  <ActionsGroup :size="'mini'" :actions="actions" :more-actions="moreActions" @actionClick="handleActionClick"></ActionsGroup>
 </template>
 
 <script>
@@ -10,47 +10,78 @@ export default {
   components: { ActionsGroup },
   extends: BaseFormatter,
   data() {
-    const actions = []
-    let hasUpdate = this.col.actions.hasUpdate
-    if (typeof this.col.actions.hasUpdate === 'function') {
-      hasUpdate = this.col.actions.hasUpdate(this.row, this.cellValue)
-    }
-    if (hasUpdate) {
-      let canUpdate = this.col.actions.canUpdate
-      if (typeof this.col.actions.canUpdate === 'function') {
-        canUpdate = this.col.actions.canUpdate(this.row, this.cellValue)
-      }
-      actions.push({
-        name: 'edit',
+    const defaultActions = [
+      {
+        name: 'update',
         title: this.$tc('Update'),
         type: 'primary',
-        disabled: !canUpdate
-      })
-    }
-
-    let hasDelete = this.col.actions.hasDelete
-    if (typeof this.col.actions.hasDelete === 'function') {
-      hasDelete = this.col.actions.hasDelete(this.row, this.cellValue)
-    }
-    if (hasDelete) {
-      let canDelete = this.col.actions.canDelete
-      if (typeof this.col.actions.canDelete === 'function') {
-        canDelete = this.col.actions.canDelete(this.row, this.cellValue)
-      }
-      actions.push({
+        has: this.col.actions.hasUpdate || true,
+        can: this.col.actions.canUpdate || true,
+        callback: this.col.actions.onUpdate
+      },
+      {
         name: 'delete',
         title: this.$tc('Delete'),
         type: 'danger',
-        disabled: !canDelete
-      })
-    }
+        has: this.col.actions.hasDelete || true,
+        can: this.col.actions.canDelete || true,
+        callback: this.col.actions.onDelete
+      }
+    ]
+    const extraActions = this.col.actions.extraActions || []
     return {
-      actions: actions
+      defaultActions: defaultActions,
+      extraActions: extraActions
+    }
+  },
+  computed: {
+    validActions() {
+      const actions = [...this.defaultActions, ...this.extraActions]
+      const validActions = []
+      for (const v of actions) {
+        const has = this.checkItem(v, 'has')
+        if (!has) {
+          continue
+        }
+        const can = this.checkItem(v, 'can')
+        v.disabled = !can
+        validActions.push(v)
+      }
+      return validActions
+    },
+    actions() {
+      return this.validActions.slice(0, 2)
+    },
+    moreActions() {
+      return this.validActions.slice(2, this.validActions.length)
+    },
+    namedValidActions() {
+      const actions = {}
+      for (const action of this.validActions) {
+        if (!action || !action.hasOwnProperty('name')) {
+          continue
+        }
+        actions[action.name] = action
+      }
+      return actions
     }
   },
   methods: {
     handleActionClick(item) {
-      this.emit('actionClick', item, this.row, this.col, this.cellValue)
+      const action = this.namedValidActions[item]
+      if (action && action.callback) {
+        console.log(this.setting)
+        action.callback(this.row, this.col, this.cellValue)
+      }
+    },
+    checkItem(item, attr) {
+      let ok = item[attr]
+      if (typeof ok === 'function') {
+        ok = ok(this.row, this.cellValue)
+      } else if (ok == null) {
+        ok = true
+      }
+      return ok
     }
   }
 }

src/components/DataTable/formatters/base.vue

@@ -1,5 +1,4 @@
 <template>
-
 </template>
 
 <script>
@@ -17,6 +16,10 @@ export default {
     cellValue: {
       type: [String, Boolean, Number, Object],
       default: null
+    },
+    setting: {
+      type: Array,
+      default: () => ({})
     }
   }
 }