使用table-tree 显示树状分类，并添加

package.json

@@ -12,7 +12,8 @@
     "core-js": "^3.6.5",
     "element-ui": "^2.13.2",
     "vue": "^2.6.11",
-    "vue-router": "^3.2.0"
+    "vue-router": "^3.2.0",
+    "vue-table-with-tree-grid": "^0.2.4"
   },
   "devDependencies": {
     "@vue/cli-plugin-babel": "~4.4.0",

src/components/access/access.vue

@@ -12,7 +12,7 @@
           <el-table-column label="权限名称" prop="authName"></el-table-column>
           <el-table-column label="路径" prop="path"></el-table-column>
           <el-table-column label="权限等级" prop="level">
-            <template scope="scope">
+            <template slot-scope="scope">
               <el-tag :type="['','success','warning',][scope.row.level]">等级{{['一','二','三'][scope.row.level]}}</el-tag>
             </template>
           </el-table-column>

src/components/access/roles.vue

@@ -15,7 +15,7 @@
 
       <el-table :data="data" border stripe>
         <el-table-column type="expand">
-          <template scope="scope">
+          <template slot-scope="scope">
             <el-row class="bo" :key="v1.id" v-for="(v1) in scope.row.children">
               <!--一级权限-->
               <el-col  :span="5">
@@ -41,7 +41,7 @@
         <el-table-column label="角色名" prop="roleName"></el-table-column>
         <el-table-column width="300" label="角色描述" prop="roleDesc"></el-table-column>
         <el-table-column label="操作" >
-          <template scope="scope">
+          <template slot-scope="scope">
             <el-button size="mini" icon="el-icon-edit" type="primary" @click="edit(scope.row.id)">编辑</el-button>
             <el-button size="mini" icon="el-icon-delete" type="danger">删除</el-button>
             <el-button size="mini" icon="el-icon-setting" @click="setRole(scope.row)" type="warning">分配权限</el-button>

src/components/goods/categories.vue

@@ -0,0 +1,186 @@
+<template>
+  <div class="categories">
+    <el-breadcrumb separator-class="el-icon-arrow-right">
+      <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
+      <el-breadcrumb-item>商品管理</el-breadcrumb-item>
+      <el-breadcrumb-item>商品分类</el-breadcrumb-item>
+    </el-breadcrumb>
+
+    <el-card>
+      <el-row>
+        <el-col>
+          <el-button type="primary" @click="add()">添加分类</el-button>
+        </el-col>
+      </el-row>
+
+      <table-tree class="tree-table" :data="data" show-index :columns="columns" index-text="#" border :show-row-hover="false" :selection-type="false" :expand-type="false">
+        <!--是否有效-->
+        <template slot="isok" slot-scope="scope">
+          <i style="color: lightgreen" :class="'el-icon-'+(scope.row.cat_deleted ? 'error' : 'success')"></i>
+        </template>
+        <!--排序-->
+        <template slot="order" slot-scope="scope">
+          <el-tag size="mini" :type="['','success','warning',][scope.row.cat_level]">{{['一','二','三'][scope.row.cat_level]}}级</el-tag>
+        </template>
+        <!--操作-->
+        <template slot="operate" slot-scope="scope">
+          <el-button  icon="el-icon-edit" type="primary" size="mini" @click="edit(scope.row)">编辑</el-button>
+          <el-button size="mini"  icon="el-icon-delete" type="danger" @click="del(scope.row)">删除</el-button>
+        </template>
+      </table-tree>
+
+      <el-pagination
+        @size-change="handleSizeChange"
+        @current-change="handleCurrentChange"
+        :current-page="query.pagenum"
+        :page-sizes="[5, 15, 20, 50]"
+        :page-size="query.pagesize"
+        layout="total, sizes, prev, pager, next, jumper"
+        :total="total">
+      </el-pagination>
+    </el-card>
+
+    <el-dialog
+      title="添加分类"
+      :visible.sync="dialogVisible"
+      @close="form={cat_name: '',
+        cat_pid: [],
+        cat_level: 0}"
+      width="50%"
+      >
+
+      <el-form ref="form" :rules="rules" :model="form" label-width="80px">
+        <el-form-item  label="分类名称" prop="cat_name">
+          <el-input v-model="form.cat_name"></el-input>
+        </el-form-item>
+        <el-form-item  label="父级分类" >
+
+          <el-cascader class="cas" clearable
+            :props="props"
+            :options="parent"
+            change-on-select
+            v-model="form.cat_pid"
+            ></el-cascader>
+        </el-form-item>
+      </el-form>
+      <span slot="footer" class="dialog-footer">
+        <el-button @click="dialogVisible = false">取 消</el-button>
+        <el-button type="primary" @click="sub">提交</el-button>
+      </span>
+    </el-dialog>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'categories',
+  data () {
+    return {
+      data: [],
+      query: {
+        type: 3,
+        pagenum: 1,
+        pagesize: 5
+      },
+      columns: [
+        {
+          label: '分类名称',
+          prop: 'cat_name'
+
+        },
+        {
+          label: '是否有效',
+          type: 'template',
+          template: 'isok'
+        },
+        {
+          label: '排序',
+          type: 'template',
+          template: 'order'
+        },
+        {
+          label: '操作',
+          type: 'template',
+          template: 'operate'
+        }
+      ],
+      total: 0,
+      dialogVisible: false,
+      form: {
+        cat_name: '',
+        cat_pid: [],
+        cat_level: 0
+      },
+      props: {
+        label: 'cat_name',
+        value: 'cat_id',
+        children: 'children'
+      },
+      parent: [],
+      rules: {
+        cat_name: [
+          { required: true, message: '请输入分类名称', trigger: 'blur' },
+          { min: 1, max: 10, message: '长度在 1 到 10 个字符', trigger: 'blur' }
+        ]
+      }
+    }
+  },
+  methods: {
+    sub () {
+      this.$refs.form.validate(valid => {
+        if (valid) {
+          this.form.cat_level = this.form.cat_pid.length
+          this.form.cat_pid = this.form.cat_pid.length > 0 ? this.form.cat_pid[this.form.cat_pid.length - 1] : 0
+          this.$http.post('categories', this.form).then(response => {
+            const res = response.data
+            if (res.meta.status !== 201) {
+              return this.$message.error(res.meta.msg)
+            }
+            this.$message.success(res.meta.msg)
+            this.list()
+            this.dialogVisible = false
+          }).catch(error => error)
+        }
+      })
+    },
+    add () {
+      this.dialogVisible = true
+      this.parentCategories()
+    },
+    edit (row) {},
+    del (row) {},
+    async parentCategories () {
+      const { data: res } = await this.$http.get('categories', { params: { type: 2 } })
+      if (res.meta.status !== 200) {
+        return this.$message.error(res.meta.msg)
+      }
+      this.parent = res.data
+    },
+    handleSizeChange (val) {
+      this.query.pagesize = val
+      this.list()
+    },
+    handleCurrentChange (val) {
+      this.query.pagenum = val
+      this.list()
+    },
+    async list () {
+      const { data: res } = await this.$http.get('categories', { params: this.query })
+      this.data = res.data.result
+      this.total = res.data.total
+    }
+  },
+  mounted () {
+    this.list()
+  }
+}
+</script>
+
+<style lang="less" scoped>
+.tree-table{
+  margin-top: 15px;
+}
+  .cas {
+    width: 100%;
+  }
+</style>

src/components/goods/goods.vue

@@ -0,0 +1,12 @@
+<template>
+    <div class="goods">
+        <pre v-text="$attrs"/>
+    </div>
+</template>
+
+<script>
+export default {
+  props: {
+  }
+}
+</script>

src/main.js

@@ -5,8 +5,10 @@ import ElementUI from 'element-ui'
 import 'element-ui/lib/theme-chalk/index.css'
 import './assets/fonts/iconfont.css'
 import './assets/css/globel.css'
+import tableTree from 'vue-table-with-tree-grid'
 import axios from 'axios'
 
+Vue.component('table-tree', tableTree)
 axios.defaults.baseURL = 'http://127.0.0.1:8888/api/private/v1/'
 axios.interceptors.request.use(config => {
   config.headers.Authorization = sessionStorage.getItem('token')

src/router/router.js

@@ -6,6 +6,7 @@ import welcome from '../components/welcome'
 import users from '../components/users/users'
 import access from '../components/access/access'
 import roles from '../components/access/roles'
+import categories from '../components/goods/categories'
 
 Vue.use(VueRouter)
 
@@ -20,7 +21,8 @@ const routes = [
       { path: '/welcome', component: welcome },
       { path: '/users', component: users },
       { path: '/rights', component: access },
-      { path: '/roles', component: roles }
+      { path: '/roles', component: roles },
+      { path: '/categories', component: categories }
     ]
   }
 ]