Browse Source

wanda-adm:feat> 优化表格组件

shaun-sheep 3 years ago
parent
commit
d98578f795
2 changed files with 25 additions and 21 deletions
  1. 22 18
      src/components/public/adm-multi-table.vue
  2. 3 3
      src/layout/components/Sidebar/index.vue

+ 22 - 18
src/components/public/adm-multi-table.vue

@@ -12,41 +12,45 @@
         >
             <el-table-column prop="date" label="编辑" width="80" align="center" fixed>
                 <template slot-scope="scope">
-                    <span class="el-icon-edit el-input__icon" style="cursor: pointer" @click="handleEdit(scope.$index, scope.row)"> </span>
+                    <span class="el-icon-edit el-input__icon" style="cursor: pointer"
+                          @click="handleEdit(scope.$index, scope.row)"> </span>
                 </template>
             </el-table-column>
-            <el-table-column v-for="item in headersStage" :key="item.name" :label="item.name" align="center">
-                <el-table-column
-                    v-for="(child, index) in item.data"
-                    :key="index"
-                    :label="child.unit ? child.aliasName + ' (' + child.unit + ')' : child.aliasName"
-                    :prop="child.path"
-                    :formatter="formatContent"
-                    align="center"
-                >
+            <template v-for="item in headersStage">
+                <el-table-column v-if="item.data.length > 0" :key="item.name" :label="item.name" align="center">
+                    <el-table-column
+                        v-for="(child, index) in item.data"
+                        :key="index"
+                        :label="child.unit ? child.aliasName + ' (' + child.unit + ')' : child.aliasName"
+                        :prop="child.path"
+                        :formatter="formatContent"
+                        align="center"
+                    >
+                    </el-table-column>
                 </el-table-column>
-            </el-table-column>
+            </template>
         </el-table>
         <div v-else class="center">暂无数据</div>
     </div>
 </template>
 
 <script lang="ts">
-import { ElTable } from "element-ui/types/table";
-import { Component, Emit, Prop, Ref, Vue, Watch } from "vue-property-decorator";
+import {ElTable} from "element-ui/types/table";
+import {Component, Emit, Prop, Ref, Vue, Watch} from "vue-property-decorator";
+
 @Component({
     name: "adm-multi-table",
 })
 export default class extends Vue {
     @Ref("tableDom") readonly tableDom!: ElTable;
     // 表格数据
-    @Prop({ default: Array }) tableData?: [];
+    @Prop({default: Array}) tableData?: [];
     // 表头数据
-    @Prop({ default: Object }) headersStage?: any;
+    @Prop({default: Object}) headersStage?: any;
     // 当前页头文字
-    @Prop({ default: "" }) currentHeader?: string;
+    @Prop({default: ""}) currentHeader?: string;
     // 动态数据是否对表号-功能号做枚举转换
-    @Prop({ default: true }) isDynamicMap?: boolean;
+    @Prop({default: true}) isDynamicMap?: boolean;
 
     @Emit("handleCurrentEdit")
     handleEdit(index: number, row: any) {
@@ -106,7 +110,7 @@ export default class extends Vue {
         return cellValue;
     }
 
-    @Watch("headersStage", { immediate: true, deep: true })
+    @Watch("headersStage", {immediate: true, deep: true})
     onCurrentHeaderChange() {
         this.$nextTick(() => {
             if (this.tableDom?.doLayout) this.tableDom.doLayout();

+ 3 - 3
src/layout/components/Sidebar/index.vue

@@ -17,8 +17,8 @@
 </template>
 
 <script lang="ts">
-import { Component, Vue } from "vue-property-decorator";
-import { AppModule } from "@/store/modules/app";
+import {Component, Vue} from "vue-property-decorator";
+import {AppModule} from "@/store/modules/app";
 import SidebarItem from "./SidebarItem.vue";
 import variables from "@/styles/_variables.scss";
 
@@ -43,7 +43,7 @@ export default class extends Vue {
 
     get activeMenu() {
         const route = this.$route;
-        const { meta, path } = route;
+        const {meta, path} = route;
         if (meta.activeMenu) {
             return meta.activeMenu;
         }