虚拟加载表格高度调整

src/components/super-ux-table/index.vue

@@ -62,7 +62,11 @@ export default {
     },
     height: {
       type: [String, Number],
-      default: () => "auto",
+      require: false,
+    },
+    firstSummary: {
+      type: Boolean,
+      default: false,
     },
   },
   components: {
@@ -104,6 +108,7 @@ export default {
       filterState: false,
       count: 0,
       scrollTop: 0,
+      resizeHeight: 0,
     };
   },
   computed: {
@@ -137,12 +142,14 @@ export default {
       },
       set() {},
     },
-    // height:{
-    //   get(){
-    //     return 100% -
-    //   },
-    //   set(){},
-    // }
+    tableHeight: {
+      get() {
+        let { height } = this.$props;
+        console.log(height, "height");
+        return height ? height : this.resizeHeight;
+      },
+      set() {},
+    },
   },
   watch: {
     filterRules: {
@@ -173,7 +180,35 @@ export default {
       deep: true,
     },
   },
+  directives: {
+    // 使用局部注册指令的方式
+    resize: {
+      // 指令的名称
+      bind(el, binding) {
+        // el为绑定的元素，binding为绑定给指令的对象
+        let width = "",
+          height = "";
+        function isReize() {
+          const style = document.defaultView.getComputedStyle(el);
+          if (width !== style.width || height !== style.height) {
+            binding.value(); // 关键
+          }
+          width = style.width;
+          height = style.height;
+        }
+        el.__vueSetInterval__ = setInterval(isReize, 300);
+      },
+      unbind(el) {
+        clearInterval(el.__vueSetInterval__);
+      },
+    },
+  },
   methods: {
+    resize() {
+      this.resizeHeight =
+        document.getElementsByClassName("el-super-ux-table")[0].offsetHeight -
+        55;
+    },
     //
     onSelectionChange(value) {
       this.selectData = value;
@@ -289,8 +324,11 @@ export default {
     },
     getSummaries({ columns, data }) {
       const means = []; // 合计
+
+      let { firstSummary } = this.$props;
+
       columns.forEach((column, columnIndex) => {
-        if (columnIndex === 0) {
+        if (!firstSummary && columnIndex === 0) {
           means.push("合计");
         } else {
           const values = data.map((item) => Number(item[column.property]));
@@ -304,12 +342,14 @@ export default {
           if (sumColumn.length) {
             means[columnIndex] = values.reduce((prev, curr) => {
               const value = Number(curr);
+
               if (!isNaN(value)) {
                 return prev + curr;
               } else {
                 return prev;
               }
             }, 0);
+
             means[columnIndex] = means[columnIndex].toFixed(2);
           } else {
             means[columnIndex] = "";
@@ -334,7 +374,7 @@ export default {
 </script>
 
 <template>
-  <div class="el-super-ux-table" :key="count">
+  <div class="el-super-ux-table" :key="count" v-resize="resize">
     <ux-grid
       border
       row-key
@@ -342,14 +382,13 @@ export default {
       keep-source
       show-overflow
       beautify-table
-      :height="height"
       ref="superUxTable"
       v-bind="$attrs"
+      :height="tableHeight"
       v-on="$listeners"
       :data="innerValue"
       :show-summary="showSummary"
       :summary-method="getSummaries"
-      highlight-current-row
       @row-click="onRowClick"
       @header-dragend="onWidth"
       @selection-change="onSelectionChange"
@@ -368,8 +407,7 @@ export default {
         resizable
         reserve-selection
         :column-key="rowKey"
-      >
-      </ux-table-column>
+      ></ux-table-column>
       <!-- 序号 -->
       <ux-table-column
         v-if="index"
@@ -380,8 +418,7 @@ export default {
         align="center"
         class="is-index"
         resizable
-      >
-      </ux-table-column>
+      ></ux-table-column>
       <ux-table-column
         v-for="({ item, attr }, index) in showColumns"
         :key="item.key + index"

src/views/purchase/task/index.vue

@@ -14,6 +14,7 @@ export default {
     XyzcButton: () => import("./xie-yi-zhi-cai/index.vue"),
     lcButton: () => import("./line-close/index.vue"),
     ElSuperTable: () => import("@/components/super-table/index.vue"),
+    ElSuperUxTable: () => import("@/components/super-ux-table/index.vue"),
     ElSuperSearch: () => import("@/components/super-search/index.vue"),
   },
   data() {
@@ -31,13 +32,14 @@ export default {
       SearchColumns: SearchColumns,
     };
   },
-  computed: {},
+  computed: {
+  },
   watch: {},
   created() {
     this.params = {
       ...this.params,
-      statusList:['0','2','3']
-    }
+      statusList: ["0", "2", "3"],
+    };
     this.useQuery(this.params, this.page);
   },
   methods: {
@@ -171,7 +173,7 @@ export default {
         ></dc-button>
       </el-button-group> -->
     </div>
-    <el-super-table
+    <el-super-ux-table
       v-model="tableData"
       :size="size"
       :dict="dict"
@@ -185,7 +187,7 @@ export default {
       @row-select="useSelect"
       @pagination="useQuery(params, page)"
     >
-    </el-super-table>
+    </el-super-ux-table>
   </el-card>
 </template>
 <style scoped lang="scss">

src/views/purchase/task/xie-yi-zhi-cai/index.vue

@@ -1,5 +1,5 @@
 <script>
-import { TableColumns ,BasicColumns} from "./column";
+import { TableColumns, BasicColumns } from "./column";
 import { initDicts } from "@/utils/init.js";
 import { FIRSTDIRECT, ADD } from "@/api/business/purchase/task";
 export default {
@@ -14,6 +14,7 @@ export default {
   components: {
     ElSuperTable: () => import("@/components/super-table/index.vue"),
     ElDictTag: () => import("@/components/DictTag/index.vue"),
+    ElSuperUxTable: () => import("@/components/super-ux-table/index.vue"),
     ElComputedInputV2: () => import("@/components/computed-input-v2/index.vue"),
   },
   data() {
@@ -24,11 +25,11 @@ export default {
       visible: false,
       loading: false,
       tableColumns: TableColumns,
-      basicColumns:BasicColumns,
+      basicColumns: BasicColumns,
       data: [],
-      showData:[],
-      supplier:'',
-      size:'mini',
+      showData: [],
+      supplier: "",
+      size: "mini",
     };
   },
   computed: {
@@ -38,32 +39,29 @@ export default {
       },
       set() {},
     },
-    restaurants:{
-      get(){
+    restaurants: {
+      get() {
         let allSupplier = [];
-        this.data.forEach(item =>{
-
-          let orderPriceVos = item.orderPriceVos.map(order => ({
-            value:order.supplierName,
-            id:order.supplier
-          }))
+        this.data.forEach((item) => {
+          let orderPriceVos = item.orderPriceVos.map((order) => ({
+            value: order.supplierName,
+            id: order.supplier,
+          }));
           allSupplier.push(...orderPriceVos);
-
-        })
-        allSupplier = this.uniqueFunc(allSupplier,'id');
-        console.log(allSupplier,'allSupplier');
+        });
+        allSupplier = this.uniqueFunc(allSupplier, "id");
+        console.log(allSupplier, "allSupplier");
         return allSupplier;
       },
-      set(){},
-    }
-  },
-  watch: {
+      set() {},
+    },
   },
+  watch: {},
   methods: {
     //
     async open(prop) {
       this.visible = await this.fetchItem(prop);
-      this.supplier = '';
+      this.supplier = "";
     },
     //
     hide() {
@@ -80,15 +78,18 @@ export default {
             ...item,
             orderPriceVos: item.orderPriceVos.map((cItem) => ({
               ...item,
-              customerName:'',
-              customer:'',
+              customerName: "",
+              customer: "",
               ...cItem,
-              purchaseQuantity: item.orderPriceVos.length === 1 ? (item.puQty - item.executeQty) : undefined
+              purchaseQuantity:
+                item.orderPriceVos.length === 1
+                  ? item.puQty - item.executeQty
+                  : undefined,
             })),
           }));
 
-          console.log(this.data,'this.data');
-          this.showData =  _.cloneDeep(this.data);
+          console.log(this.data, "this.data");
+          this.showData = _.cloneDeep(this.data);
           return true;
         } else {
           return false;
@@ -111,9 +112,9 @@ export default {
           ),
         }))
         .filter((item) => item.orderPriceVos.length);
-        console.log(params,'params');
-        try {
-          this.loading = true;
+      console.log(params, "params");
+      try {
+        this.loading = true;
         // try
         const { msg, code } = await ADD(params);
         if (code === 200) {
@@ -125,38 +126,34 @@ export default {
         // catch
       } finally {
         // finally
-          this.loading = false;
+        this.loading = false;
       }
     },
-    hide(){
+    hide() {
       this.visible = false;
     },
-    supplierChange(value){
-      console.log(value,'value');
+    supplierChange(value) {
+      console.log(value, "value");
     },
     // 建议值
-    querySearch(queryString, cb){
-
+    querySearch(queryString, cb) {
       let results = this.restaurants;
 
       results = queryString
         ? results.filter(this.createFilter(queryString))
         : results;
 
-    //cb是回调函数，返回筛选出的结果数据到输入框下面的输入列表
+      //cb是回调函数，返回筛选出的结果数据到输入框下面的输入列表
       cb(results);
-
     },
     createFilter(queryString) {
-
       return (item) => {
         return item.value.toUpperCase().match(queryString.toUpperCase());
       };
-
     },
-    
-    handleSelect(prop){
-      console.log(this.data,'handleSelect');
+
+    handleSelect(prop) {
+      console.log(this.data, "handleSelect");
 
       // this.tableColumns = this.tableColumns.map(({ item, attr }) =>{
 
@@ -168,7 +165,7 @@ export default {
       //     item: {...item},
       //     attr: {...attr},
       //   }
-        
+
       // })
 
       // this.$refs.superTable.forEach(item =>{
@@ -189,36 +186,35 @@ export default {
       //   onFilter();
       // })
 
-      this.showData = this.data.map(item => {
+      this.showData = this.data.map((item) => {
         return {
           ...item,
-          orderPriceVos:item.orderPriceVos.filter(order => order.supplier === prop.id),
-        }
-      })
+          orderPriceVos: item.orderPriceVos.filter(
+            (order) => order.supplier === prop.id
+          ),
+        };
+      });
     },
-    handleClear(){
-      this.showData =  _.cloneDeep(this.data);
+    handleClear() {
+      this.showData = _.cloneDeep(this.data);
     },
     // 对象数组去重
-    uniqueFunc(arr, uniId){
+    uniqueFunc(arr, uniId) {
       const res = new Map();
-      return arr.filter((item) => !res.has(item[uniId]) && res.set(item[uniId], 1));
+      return arr.filter(
+        (item) => !res.has(item[uniId]) && res.set(item[uniId], 1)
+      );
     },
-    changeQuantity(prop,value){
-
-      this.data = this.data.map(item =>{
-
-        if(item.id === prop.id){
-
-          item.orderPriceVos = item.orderPriceVos.map(order =>{
-
-            if(order.id === value.id){
-
+    changeQuantity(prop, value) {
+      this.data = this.data.map((item) => {
+        if (item.id === prop.id) {
+          item.orderPriceVos = item.orderPriceVos.map((order) => {
+            if (order.id === value.id) {
               return value;
             }
 
             return order;
-          })
+          });
 
           // item.orderPriceVos.forEach(order =>{
 
@@ -233,50 +229,39 @@ export default {
           // })
         }
         return item;
-      })
+      });
 
+      // 实时统计
+      this.$refs.superTable[0].updateFooter();
     },
-    changeDatePlan(prop,value){
-
-      this.data = this.data.map(item =>{
-
-        if(item.id === prop.id){
-
-          item.orderPriceVos = item.orderPriceVos.map(order =>{
-
-            if(order.id === value.id){
-
+    changeDatePlan(prop, value) {
+      this.data = this.data.map((item) => {
+        if (item.id === prop.id) {
+          item.orderPriceVos = item.orderPriceVos.map((order) => {
+            if (order.id === value.id) {
               return value;
             }
 
             return order;
-          })
-
+          });
         }
         return item;
-      })
+      });
     },
-    changeNote(prop,value){
-
-      this.data = this.data.map(item =>{
-
-        if(item.id === prop.id){
-
-          item.orderPriceVos = item.orderPriceVos.map(order =>{
-
-            if(order.id === value.id){
-
+    changeNote(prop, value) {
+      this.data = this.data.map((item) => {
+        if (item.id === prop.id) {
+          item.orderPriceVos = item.orderPriceVos.map((order) => {
+            if (order.id === value.id) {
               return value;
             }
 
             return order;
-          })
-
+          });
         }
         return item;
-      })
+      });
     },
-
   },
   created() {},
   mounted() {},
@@ -313,16 +298,12 @@ export default {
           v-loading="loading"
           >确 认</el-button
         >
-        <el-button
-          :size="$attrs.size"
-          @click="hide"
-          v-loading="loading"
+        <el-button :size="$attrs.size" @click="hide" v-loading="loading"
           >取 消</el-button
         >
-        
       </template>
 
-      <el-row style="padding: 0 16px;">
+      <el-row style="padding: 0 16px">
         <el-col>
           <el-autocomplete
             class="inline-input"
@@ -337,12 +318,10 @@ export default {
         </el-col>
       </el-row>
 
-
       <div v-for="(item, index) in showData" :key="index" class="m-4">
-
         <template v-if="item.orderPriceVos.length">
           <el-descriptions :column="4">
-            <template slot="title" >
+            <template slot="title">
               <template>
                 <span style="margin-right: 10px">{{ item.materialName }}</span>
                 <span style="color: tomato">{{ item.puQty }}</span>
@@ -352,28 +331,28 @@ export default {
                 >) <span> {{ item.puUnitName }}</span>
               </template>
             </template>
-  
-            <el-descriptions-item 
-              v-for="(basic,bIndex) in basicColumns"
+
+            <el-descriptions-item
+              v-for="(basic, bIndex) in basicColumns"
               :key="bIndex"
               :label="basic.item.title"
-            >{{ item[basic.item.key] }}
+              >{{ item[basic.item.key] }}
             </el-descriptions-item>
-            <el-descriptions-item 
-              label="需求数量"
-            >{{ item.puQty - (item.executeQty || 0) }}
+            <el-descriptions-item label="需求数量"
+              >{{ item.puQty - (item.executeQty || 0) }}
             </el-descriptions-item>
-            
           </el-descriptions>
-          
-          <el-super-table
+
+          <el-super-ux-table
             v-if="visible"
             ref="superTable"
             v-model="item.orderPriceVos"
+            height="auto"
             :columns="tableColumns"
             :size="$attrs.size"
             :dict="dict"
             showSummary
+            firstSummary
           >
             <!-- showSummary -->
             <template slot="purchaseQuantity" slot-scope="scope">
@@ -382,7 +361,7 @@ export default {
                 v-model="scope.row[scope.item.key]"
                 :size="$attrs.size"
                 :max="scope.attr.max(scope.row)"
-                @change="changeQuantity(item,scope.row)"
+                @change="changeQuantity(item, scope.row)"
               >
               </component>
             </template>
@@ -404,9 +383,8 @@ export default {
               >
               </component>
             </template>
-          </el-super-table>
+          </el-super-ux-table>
         </template>
-        
       </div>
     </el-drawer>
   </el-button>