[Update] 修改table 渲染formatter

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

@@ -74,9 +74,7 @@
                   class="tree-ctrl"
                   @click="toggleExpanded(scope.$index)"
                 >
-                  <i
-                    :class="`el-icon-${scope.row._expanded ? 'minus' : 'plus'}`"
-                  />
+                  <i :class="`el-icon-${scope.row._expanded ? 'minus' : 'plus'}`"/>
                 </span>
                 {{ scope.row[columns[0].prop] }}
               </template>
@@ -92,11 +90,25 @@
 
         <!--非树-->
         <template v-else>
+          <el-data-table-column v-if="hasSelection" type="selection" :align="columnsAlign"></el-data-table-column>
           <el-data-table-column
             v-for="col in columns"
             :key="col.prop"
+            :formatter="typeof col.formatter === 'function' ? col.formatter : null"
             v-bind="{align: columnsAlign, ...col}"
           >
+            <template slot-scope="{row}">
+              <div
+                v-if="col.formatter && typeof col.formatter !== 'function'"
+                :is="col.formatter"
+                :row="row"
+                :col="col"
+              >
+              </div>
+              <template v-else>
+                {{ row[col.prop] }}
+              </template>
+            </template>
           </el-data-table-column>
         </template>
 
@@ -119,6 +131,7 @@
             <self-loading-button
               v-if="hasEdit"
               type="primary"
+              :disable="!canEdit(scope.row)"
               :size="operationButtonType === 'text' ? '' : buttonSize"
               :is-text="operationButtonType === 'text'"
               @click="onDefaultEdit(scope.row)"
@@ -153,8 +166,9 @@
               </self-loading-button>
             </template>
             <self-loading-button
-              v-if="!hasSelect && hasDelete && canDelete(scope.row)"
+              v-if="hasDelete"
               type="danger"
+              :disable="!canDelete(scope.row)"
               :size="operationButtonType === 'text' ? '' : buttonSize"
               :is-text="operationButtonType === 'text'"
               @click="onDefaultDelete(scope.row)"
@@ -450,6 +464,12 @@ export default {
         return true
       }
     },
+    canEdit: {
+      type: Function,
+      default() {
+        return true
+      }
+    },
     /**
      * 点击新增按钮时的方法, 当默认新增方法不满足需求时使用, 需要返回promise
      * 参数(data, row) data 是form表单的数据, row 是当前行的数据, 只有isTree为true时, 点击操作列的新增按钮才会有值
@@ -484,7 +504,7 @@ export default {
         const ids = Array.isArray(data)
           ? data.map(v => v[this.id]).join(',')
           : data[this.id]
-        return this.$axios.delete(this.url + '/' + ids, this.axiosConfig)
+        return this.$axios.delete(this.url + '/' + ids + '/', this.axiosConfig)
       }
     },
     /**
@@ -750,6 +770,14 @@ export default {
     extraPaginationAttrs: {
       type: Object,
       default: () => {}
+    },
+    hasSelection: {
+      type: Boolean,
+      default: true
+    },
+    hasDetail: {
+      type: Boolean,
+      default: true
     }
   },
   data() {
@@ -775,6 +803,7 @@ export default {
   },
   computed: {
     hasSelect() {
+      console.log(this.columns.length && this.columns[0].type === 'selection')
       return this.columns.length && this.columns[0].type === 'selection'
     },
     selectable() {

src/components/DataTable/formatters/DetailFormatter.vue

@@ -0,0 +1,34 @@
+<template>
+  <el-link :type="col.type || 'success'" @click="goDetail">{{ cellValue }}</el-link>
+</template>
+
+<script>
+export default {
+  name: 'DetailFormatter',
+  props: {
+    row: {
+      type: Object,
+      default: null
+    },
+    col: {
+      type: Object,
+      default: null
+    }
+  },
+  computed: {
+    cellValue() {
+      return this.row[this.col.prop]
+    }
+  },
+  methods: {
+    goDetail() {
+      const routeName = this.col.route || ''
+      this.$router.push({ name: routeName, params: { id: this.row.id }})
+    }
+  }
+}
+</script>
+
+<style scoped>
+
+</style>

src/components/DataTable/index.vue

@@ -30,12 +30,14 @@ export default {
         totalPath: 'count',
         saveQuery: false, // 关闭路径保存查询参数
         persistSelection: true, // 切换页面 已勾选项不会丢失
-        hasEdit: false, // 有编辑按钮
-        hasDelete: false,
-        hasAction: false, // 是否有更多操作
-        hasUpload: false,
+        hasEdit: true, // 有编辑按钮
+        hasDelete: true,
         hasNew: false,
         // editText: this.$t('action.update'), // 编辑按钮文案
+        operationAttrs: {
+          align: 'center',
+          width: '150px'
+        },
         tableAttrs: {
           stripe: true, // 斑马纹表格
           border: true, // 表格边框

src/components/ListTable/TableAction.vue

@@ -90,7 +90,7 @@ export default {
       console.log('Search: ', keyword)
     },
     handleActionClick(item) {
-      console.log('Action: ', item)
+      this.$emit('clickAction', item)
     }
   }
 }

src/components/ListTable/index.vue

@@ -1,8 +1,8 @@
 <template>
   <div>
-    <TableAction></TableAction>
+    <TableAction v-bind="actionConfig" @clickAction="handleActionClick"></TableAction>
     <el-card class="table-content">
-      <DataTable :config="tableConfig" @selection-change="handleSelectionChange" ></DataTable>
+      <DataTable :config="tableConfig" @selection-change="handleSelectionChange"></DataTable>
     </el-card>
   </div>
 </template>
@@ -24,30 +24,9 @@ export default {
       default: () => {}
     },
     // 是否显示table左侧的action
-
-    createTitle: {
-      type: String,
-      default() {
-        return this.$tc('Create')
-      }
-    },
-    createAction: {
+    actionConfig: {
       type: Object,
-      default() {
-        return {
-          type: 'primary',
-          name: 'create',
-          title: this.createTitle
-        }
-      }
-    },
-    moreActions: {
-      type: Array,
-      default: () => []
-    },
-    actions: {
-      type: Array,
-      default: () => []
+      default: () => ({ })
     }
   },
   data() {
@@ -56,46 +35,16 @@ export default {
     }
   },
   computed: {
-    totalActions() {
-      let actions = this.actions
-      if (this.hasCreate) {
-        actions = [
-          this.createAction,
-          ... actions
-        ]
-      }
-      return actions
-    }
   },
   methods: {
     handleSelectionChange(val) {
-      console.log('lIst table', val)
       this.selectRows = val
       this.multipleSelection = val;
       (val.length > 0) ? (this.selectDisable = false) : (this.selectDisable = true)
     },
-    handleEdit: function (index, row) {
-      try {
-        this.$router.push({name: this.action.hasEdit, params: {id: row.id}})
-      } catch (error) {
-        console.log(error)
-      }
-    },
-    handleHeaderActionClick(item) {
-      this.$emit('headerActionClick', item, this.selectRows)
-    },
-    handleDelete: (index, row) => {
-    },
-    get(draw, limit, offset) {
-      this.loading = true
-      // this.getData({ draw, limit, offset }, { row: 1 }).then(response => {
-      //   console.log(response)
-      //   this.tabledata = response.results
-      //   this.total = response.count
-      //   this.loading = false
-      // })
+    handleActionClick(item) {
+      console.log('Handle ', item, this.selectRows)
     }
-
   }
 }
 </script>

src/utils/request.js

@@ -53,9 +53,9 @@ service.interceptors.response.use(
     const res = response.data
 
     // if the custom code is not 20000, it is judged as an error.
-    if (response.status !== 200 && response.status !== 201) {
+    if (response.status < 200 || response.status > 300) {
       Message({
-        message: res.message || 'Error',
+        message: res.message || res.error || 'Error',
         type: 'error',
         duration: 5 * 1000
       })

src/views/users/UserGroupList.vue

@@ -1,13 +1,15 @@
 <template>
   <Page>
     <el-alert type="success"> 这里是一个成功的文案 </el-alert>
-    <ListTable :table-config="tableConfig" />
+    <ListTable :table-config="tableConfig" :action-config="actionConfig" />
   </Page>
 </template>
 
 <script>
 import { Page } from '@/layout/components'
 import ListTable from '@/components/ListTable'
+import DetailFormatter from '@/components/DataTable/formatters/DetailFormatter'
+
 export default {
   components: {
     Page,
@@ -18,15 +20,13 @@ export default {
       tableConfig: {
         url: '/api/v1/users/groups/',
         columns: [
-          {
-            type: 'selection'
-          },
           {
             prop: 'name',
             label: this.$tc('Name'),
             key: 'name',
-            link: 'UserGroupDetail',
-            sortable: true
+            formatter: DetailFormatter,
+            sortable: true,
+            route: 'UserDetail'
           },
           {
             prop: 'users_amount',
@@ -46,6 +46,8 @@ export default {
           newClick: 'UserGroupEdit'
         }
       },
+      actionConfig: {
+      }
 
     }
   }