代码优化

src/views/system/dept/index.vue

@@ -18,19 +18,14 @@
           @click="add">新增</el-button>
       </div>
       <div style="display: inline-block;">
-        <el-button
-          class="filter-item"
-          size="mini"
-          type="warning"
-          icon="el-icon-more"
-          @click="changeExpand">{{ expand ? '折叠' : '展开' }}</el-button>
         <eForm ref="form" :is-add="true" :dicts="dicts"/>
       </div>
     </div>
     <!--表单组件-->
     <eForm ref="form" :is-add="isAdd" :dicts="dicts"/>
     <!--表格渲染-->
-    <tree-table v-loading="loading" :expand-all="expand" :data="data" :columns="columns" size="small">
+    <el-table v-loading="loading" :tree-props="{children: 'children', hasChildren: 'hasChildren'}" :default-expand-all="expand" :data="data" row-key="id" size="small">
+      <el-table-column label="名称" prop="name"/>
       <el-table-column label="状态" align="center">
         <template slot-scope="scope">
           <div v-for="item in dicts" :key="item.id">
@@ -65,12 +60,11 @@
           </el-popover>
         </template>
       </el-table-column>
-    </tree-table>
+    </el-table>
   </div>
 </template>
 
 <script>
-import treeTable from '@/components/TreeTable'
 import checkPermission from '@/utils/permission'
 import initData from '@/mixins/initData'
 import initDict from '@/mixins/initDict'
@@ -79,16 +73,10 @@ import { parseTime } from '@/utils/index'
 import eForm from './form'
 export default {
   name: 'Dept',
-  components: { eForm, treeTable },
+  components: { eForm },
   mixins: [initData, initDict],
   data() {
     return {
-      columns: [
-        {
-          text: '名称',
-          value: 'name'
-        }
-      ],
       enabledTypeOptions: [
         { key: 'true', display_name: '正常' },
         { key: 'false', display_name: '禁用' }
@@ -142,7 +130,6 @@ export default {
     },
     changeExpand() {
       this.expand = !this.expand
-      this.init()
     },
     edit(data) {
       this.isAdd = false

src/views/system/menu/form.vue

@@ -14,7 +14,7 @@
           </el-input>
         </el-popover>
       </el-form-item>
-      <el-form-item label="菜单名称" prop="name">
+      <el-form-item label="菜单标题" prop="name">
         <el-input v-model="form.name" placeholder="名称" style="width: 450px;"/>
       </el-form-item>
       <el-form-item label="内部菜单">

src/views/system/menu/index.vue

@@ -15,19 +15,14 @@
           @click="add">新增</el-button>
       </div>
       <div style="display: inline-block;">
-        <el-button
-          class="filter-item"
-          size="mini"
-          type="warning"
-          icon="el-icon-more"
-          @click="changExpand">{{ expand ? '折叠' : '展开' }}</el-button>
         <eForm ref="form" :is-add="true"/>
       </div>
     </div>
     <!--表单组件-->
     <eForm ref="form" :is-add="isAdd"/>
     <!--表格渲染-->
-    <tree-table v-loading="loading" :data="data" :expand-all="expand" :columns="columns" :height="height" size="small">
+    <el-table v-loading="loading" :data="data" :tree-props="{children: 'children', hasChildren: 'hasChildren'}" :default-expand-all="expand" row-key="id" size="small">
+      <el-table-column :show-overflow-tooltip="true" label="标题" width="125px" prop="name"/>
       <el-table-column prop="icon" label="图标" align="center" width="60px">
         <template slot-scope="scope">
           <svg-icon :icon-class="scope.row.icon" />
@@ -81,36 +76,27 @@
           </el-popover>
         </template>
       </el-table-column>
-    </tree-table>
+    </el-table>
   </div>
 </template>
 
 <script>
 import checkPermission from '@/utils/permission' // 权限判断函数
-import treeTable from '@/components/TreeTable'
 import initData from '@/mixins/initData'
 import { del } from '@/api/menu'
 import { parseTime } from '@/utils/index'
 import eForm from './form'
 export default {
   name: 'Menu',
-  components: { treeTable, eForm },
+  components: { eForm },
   mixins: [initData],
   data() {
     return {
-      columns: [
-        {
-          text: '名称',
-          value: 'name',
-          width: 140
-        }
-      ],
-      delLoading: false, expand: true, height: 625
+      delLoading: false, expand: false
     }
   },
   created() {
     this.$nextTick(() => {
-      this.height = document.documentElement.clientHeight - 200
       this.init()
     })
   },

src/views/system/permission/index.vue

@@ -15,19 +15,15 @@
           @click="add">新增</el-button>
       </div>
       <div style="display: inline-block;">
-        <el-button
-          class="filter-item"
-          size="mini"
-          type="warning"
-          icon="el-icon-more"
-          @click="changeExpand">{{ expand ? '折叠' : '展开' }}</el-button>
         <eForm ref="form" :is-add="true"/>
       </div>
     </div>
     <!--表单组件-->
     <eForm ref="form" :is-add="isAdd"/>
     <!--表格渲染-->
-    <tree-table v-loading="loading" :data="data" :expand-all="expand" :height="height" :columns="columns" size="small">
+    <el-table v-loading="loading" :data="data" :tree-props="{children: 'children', hasChildren: 'hasChildren'}" :default-expand-all="expand" row-key="id" size="small">
+      <el-table-column label="名称" prop="name"/>
+      <el-table-column label="别名" prop="alias"/>
       <el-table-column prop="createTime" label="创建日期">
         <template slot-scope="scope">
           <span>{{ parseTime(scope.row.createTime) }}</span>
@@ -55,39 +51,27 @@
           </el-popover>
         </template>
       </el-table-column>
-    </tree-table>
+    </el-table>
   </div>
 </template>
 
 <script>
 import checkPermission from '@/utils/permission' // 权限判断函数
-import treeTable from '@/components/TreeTable'
 import initData from '@/mixins/initData'
 import { del } from '@/api/permission'
 import { parseTime } from '@/utils/index'
 import eForm from './form'
 export default {
   name: 'Permission',
-  components: { treeTable, eForm },
+  components: { eForm },
   mixins: [initData],
   data() {
     return {
-      columns: [
-        {
-          text: '名称',
-          value: 'name'
-        },
-        {
-          text: '别名',
-          value: 'alias'
-        }
-      ],
-      delLoading: false, expand: true, height: 625
+      delLoading: false, expand: false
     }
   },
   created() {
     this.$nextTick(() => {
-      this.height = document.documentElement.clientHeight - 200
       this.init()
     })
   },
@@ -96,10 +80,9 @@ export default {
     checkPermission,
     beforeInit() {
       this.url = 'api/permissions'
-      const sort = 'id,desc'
       const query = this.query
       const value = query.value
-      this.params = { page: this.page, size: this.size, sort: sort }
+      this.params = { page: this.page, size: this.size }
       if (value) { this.params['blurry'] = value }
       return true
     },