分类修改：树结构改为层级进入

.gitignore

+node_modules
+dist
+package-lock.json
+
+
+*/node_modules
+*/dist
\ No newline at end of file

src/api/business/category.js

@@ -53,3 +53,11 @@ export function deleteCategory(data) {
     data
   })
 }
+
+export function getCategory(query) {
+  return request({
+    url: '/category/getSubCategory',
+    method: 'get',
+    params: query
+  })
+}

src/styles/index.scss

@@ -189,3 +189,38 @@ aside {
 .multiselect--active {
   z-index: 1000 !important;
 }
+.flex{
+  display: flex;
+  align-items: center;
+}
+.f-ai-c {
+  align-items: center;
+}
+.f-ai-fs {
+  align-items:flex-start
+}
+.f-jc-sb {
+  justify-content: space-between;
+}
+.f-jc-c {
+  justify-content: center;
+}
+.f-jc-e{
+  justify-content: end;
+}
+.f-jc-s{
+  justify-content: start;
+}
+.ml10 {
+  margin-left: 10px;
+}
+.ml20 {
+  margin-left: 20px;
+}
+.mr10 {
+  margin-right: 10px;
+}
+.mr20 {
+  margin-right: 20px;
+}
+

src/views/mall/category.vue

 <template>
   <div class="app-container">
-    <tree-table
+    <div v-if="activeLevel>0" class="page__header flex f-ai-c">
+      <el-button type="primary" size="mini" class="mr10" @click="onBack">返回</el-button>
+      <div v-if="categoryList[activeLevel]&&categoryList[activeLevel].path" class="flex">
+        <div v-for="(item,index) in categoryList[activeLevel].path" :key="index" class="page__header--text flex f-ai-c">
+          {{ item }} <span v-if="index !==categoryList[activeLevel].path.length-1"> > </span>
+        </div>
+      </div>
+    </div>
+    <el-table v-loading="listLoading" :data="categoryList[activeLevel] && categoryList[activeLevel].list" size="small" element-loading-text="正在查询中。。。" border fit highlight-current-row>
+      <el-table-column align="center" label="ID" prop="id"/>
+      <el-table-column align="center" label="名称" prop="name"/>
+      <el-table-column align="center" label="图片" width="120px">
+        <template slot-scope="scope">
+          <img v-if="scope.row.icon" :src="scope.row.icon" class="row-img">
+        </template>
+      </el-table-column>
+      <el-table-column align="center" label="层级" prop="level"/>
+      <el-table-column align="left" label="操作" width="450" class-name="small-padding fixed-width">
+        <template slot-scope="scope">
+          <el-button v-permission="['POST /admin/category/update']" type="warning" size="medium" @click="handleUpdate(scope.row)">编辑</el-button>
+          <el-button v-permission="['POST /admin/category/delete']" type="danger" size="medium" @click="handleDelete(scope.row)">删除</el-button>
+          <el-button v-permission="['POST /admin/category/add']" type="primary" size="medium" @click="handleCreate(scope.row)">+子类目</el-button>
+          <i v-permission="['POST /admin/category/getSubCategory']">
+            <el-button v-if="!scope.row.leaf" type="primary" size="medium" @click="handleChild(scope.row)">查看子类目</el-button>
+          </i>
+        </template>
+      </el-table-column>
+    </el-table>
+    <!-- <tree-table
       ref="table"
       :data="categories"
       :columns="columns"
@@ -26,7 +54,7 @@
       <template slot="c_img" slot-scope="scope">
         <img :src="scope.row.icon" class="row-img">
       </template>
-    </tree-table>
+    </tree-table> -->
     <!-- 添加或修改对话框 -->
     <el-dialog :title="textMap[dialogStatus]" :visible.sync="dialogFormVisible">
       <el-form ref="dataForm" :rules="rules" :model="dataForm" status-icon label-position="left" label-width="100px" style="width: 400px; margin-left:50px;">
@@ -77,40 +105,8 @@
   </div>
 </template>
 
-<style>
-.avatar-uploader .el-upload {
-  border: 1px dashed #d9d9d9;
-  border-radius: 6px;
-  cursor: pointer;
-  position: relative;
-  overflow: hidden;
-}
-.avatar-uploader .el-upload:hover {
-  border-color: #20a0ff;
-}
-.avatar-uploader-icon {
-  font-size: 28px;
-  color: #8c939d;
-  width: 120px;
-  height: 120px;
-  line-height: 120px;
-  text-align: center;
-}
-.avatar {
-  width: 145px;
-  height: 145px;
-  display: block;
-}
-
-.row-img {
-  width: 100px;
-  height: 100px;
-  display: block;
-}
-</style>
-
 <script>
-import { getCategoryTree, listCatL1, createCategory, updateCategory, deleteCategory } from '@/api/business/category'
+import { getCategoryTree, listCatL1, createCategory, updateCategory, deleteCategory, getCategory } from '@/api/business/category'
 import { getToken } from '@/utils/auth'
 import { uploadPath } from '@/api/business/storage'
 import TreeTable from 'tree-table-vue'
@@ -184,7 +180,9 @@ export default {
           type: 'template',
           template: 'c_category'
         }
-      ]
+      ],
+      categoryList: [],
+      activeLevel: 0
     }
   },
   computed: {
@@ -195,23 +193,37 @@ export default {
     }
   },
   created() {
-    this.getAllCategories()
+    this.getAllCategories(0)
   },
   methods: {
+    onBack() {
+      this.activeLevel--
+      this.categoryList.length = this.categoryList.length - 1
+    },
     handleRadioClick(option) {
       // console.log(option); // eslint-disable-line
     },
-    getAllCategories() {
+    handleChild(val) {
+      this.activeLevel = val.level
+      this.getAllCategories(val.id)
+    },
+    getAllCategories(id = 0) {
       this.listLoading = true
-      getCategoryTree()
-        .then(response => {
-          this.categories = response.data.data.categories
-          this.listLoading = false
-        })
-        .catch(() => {
-          this.categories = []
-          this.listLoading = false
-        })
+      const data = {
+        id: id || 0
+      }
+      getCategory(data).then(res => {
+        if (res && res.data && res.data.data && res.data.data.categoryList) {
+          this.categoryList.push({
+            list: res.data.data.categoryList,
+            path: res.data.data.categoryPath
+          })
+        }
+        this.listLoading = false
+      }).catch(() => {
+        this.categories = []
+        this.listLoading = false
+      })
     },
     resetForm() {
       this.dataForm = {
@@ -310,3 +322,41 @@ export default {
   }
 }
 </script>
+<style scoped>
+.avatar-uploader .el-upload {
+  border: 1px dashed #d9d9d9;
+  border-radius: 6px;
+  cursor: pointer;
+  position: relative;
+  overflow: hidden;
+}
+.avatar-uploader .el-upload:hover {
+  border-color: #20a0ff;
+}
+.avatar-uploader-icon {
+  font-size: 28px;
+  color: #8c939d;
+  width: 120px;
+  height: 120px;
+  line-height: 120px;
+  text-align: center;
+}
+.avatar {
+  width: 145px;
+  height: 145px;
+  display: block;
+}
+
+.row-img {
+  width: 100px;
+  height: 100px;
+  display: block;
+}
+.page__header {
+  padding: 0 0 10px;
+}
+.page__header--text {
+  font-weight: 500;
+  font-size: 16px;
+}
+</style>