Prechádzať zdrojové kódy

修改切换tab问题

zhangyu 4 rokov pred
rodič
commit
afb687fc4c
1 zmenil súbory, kde vykonal 23 pridanie a 33 odobranie
  1. 23 33
      src/components/public/adm-multi-table.vue

+ 23 - 33
src/components/public/adm-multi-table.vue

@@ -1,39 +1,24 @@
 <template>
-    <div style="height: 100%;">
+    <div style="height: 100%">
         <el-table
             :data="tableData"
             style="width: 100%"
             height="100%"
+            ref="tableDom"
             class="adm-multi-table"
             :row-style="{ height: '10px' }"
             border
-            v-if="tableData.length  > 0"
+            v-if="tableData.length > 0"
         >
-            <el-table-column
-                prop="date"
-                label="编辑"
-                width="80"
-                align="center"
-                fixed
-
-            >
+            <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="item in headersStage" :key="item.name" :label="item.name" align="center">
                 <el-table-column
-                    v-for="(child,index) in item.data"
-                    :min-width="child.path === 'outline'? 800: 110"
+                    v-for="(child, index) in item.data"
+                    :min-width="child.path === 'outline' ? 800 : 110"
                     :key="index"
                     :label="child.name"
                     :prop="child.path"
@@ -42,29 +27,36 @@
                 </el-table-column>
             </el-table-column>
         </el-table>
-        <div v-else class="center"> 暂无数据</div>
+        <div v-else class="center">暂无数据</div>
     </div>
 </template>
 
 <script lang="ts">
-import { Component, Prop, Vue } from "vue-property-decorator";
+import { ElTable } from "element-ui/types/table";
+import { Component, Prop, Vue, Watch, Ref } from "vue-property-decorator";
 @Component({
-    name: 'adm-multi-table'
+    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 ?: {}
+    @Prop({ default: Object }) headersStage?: {};
     // 当前页头文字
-    @Prop({ default: '' }) currentHeader ?: string
+    @Prop({ default: "" }) currentHeader?: string;
 
     handleEdit(index, row) {
-        console.log(index, row)
+        console.log(index, row);
     }
 
+    @Watch("headersStage", { immediate: true, deep: true })
+    onCurrentHeaderChange() {
+        this.$nextTick(() => {
+            this.tableDom.doLayout();
+        });
+    }
 }
-
 </script>
 
 <style lang="scss">
@@ -74,8 +66,6 @@ export default class extends Vue {
             padding: 0;
         }
     }
-
-
 }
 
 .center {