feat: 多级表头假分页 表头新增楼盘名称超长悬浮显示全名 户型列表卡片稍微加宽 防止拉伸

src/components/multilHeaderTable/index.vue

@@ -28,28 +28,43 @@
      </div>
      <div class="table_body" v-if="tableData instanceof Array" :style="{ width: bodyWidth + '%'}">
        <div class="productionName" v-if="tableData.length > 0" style="display: flex;flex-direction: row;width: 100%">
-         <div  v-for="(item,index) in tableData" :key="index" style="flex:1;min-width: 160px;max-width: 320px;overflow-x: auto;border-right: 2px solid #ffffff">
-           <div style="width: auto">
-             <el-row :class="{'dataCell':true}">{{item.productionName}}</el-row>
-             <div style="display: flex;flex-direction: row">
-               <div class="productionDetail" style="min-width: 160px;width: 100%;border-right: 1px solid #ffffff;"  v-for="(item2,index) in item.productionProperties" :key="index">
-                 <el-row v-for="(value, key) in dataMap"  :key="key" :class="{ 'dataCell': true, 'imgHeigth': value === 'img'}">
-                   <div v-if="value === 'string'">{{item2[key] || '--'}} <span v-if="key === 'area'">m<sup>2</sup></span> </div>
+         <div  v-for="(item,index) in tableData" :key="index" style="flex:1;min-width: 160px;overflow-x: auto;border-right: 1px solid #ffffff">
+             <el-row :class="{'dataCell':true}" style="position: relative">
+             <i class="el-icon-arrow-left position left"
+                @click="pagePrev(index)"
+                :style="{ color: currentPageList[index].page === 1 ? '#ccc' : '' }"
+                :disabled="currentPageList[index].page === 1"></i>
+               <i class="el-icon-arrow-right position right"
+                  @click="pageNext(index)"
+                  :style="{ color: currentPageList[index].page === currentPageList[index].pages ? '#ccc' : '' }"
+                  :disabled="currentPageList[index].page === currentPageList[index].page"></i> {{item.productionName}}
+             </el-row>
+               <el-col
+                 :span="8"
+                 class="productionDetail"
+                 :style="{'border-right': '1px solid #ffffff', width: widthMap[pageObj[item.productionName][currentPageList[index].page].length] }"
+                 v-for="(item2,index2) in pageObj[item.productionName][currentPageList[index].page]"
+                 :key="index2">
+                 <el-row v-for="(value, key) in dataMap"  :key="key" :class="{ 'dataCell': true, 'imgHeigth': value === 'img'}" style="white-space: nowrap">
+                   <div
+                     :title="key === 'projectName' ? item2[key] : '' "
+                     style="white-space: nowrap;overflow-x: hidden;text-overflow: ellipsis"
+                     v-if="value === 'string'">{{item2[key] || '--'}}
+                     <span v-if="key === 'area'">m<sup>2</sup></span>
+                   </div>
                    <viewer  :images="getImgUrlList(item2.imgList)"  v-else-if="value === 'img'">
                      <img v-for="(src,srcIndex) in item2.imgList"
                           :key="srcIndex"
                           :src="getImageUrl(src.fileUrl)"
                           alt="失效链接"
-                          :style="{ 'cursor': 'pointer', height: src.fileOrder === 0 ? '80px' : '0'}">
+                          :style="{ 'cursor': 'pointer', height: src.fileOrder === 0 ? '80px' : '0', maxWidth: '100%'}">
                    </viewer>
                    <div v-else-if="value === 'boolean' && item2[key] === 1" class="circle block"></div>
                    <div v-else-if="value === 'boolean' && item2[key] === 0" class="circle hollow"></div>
                    <div v-else-if="value === 'boolean' && !item2[key]" >--</div>
                  </el-row>
-               </div>
-             </div>
+               </el-col>
            </div>
-         </div>
        </div>
        <div v-else style="height: 100%;display: flex;align-items: center;">
          <div style="width: 100%;text-align: center;margin: auto">
@@ -98,23 +113,30 @@
         }
       }
     },
-    mounted() {
-      console.log(this.headerData)
+    beforeMount() {
+      if(this.tableData instanceof Array) {
+        this.getPageGroupAndList()
+      }
     },
     watch: {
       tableData: {
         deep: true,
         handler(val) {
           console.log(val, '多级表头的值发生改变！')
-          console.log(val['kitchen-LDK'] == 0)
+          this.getPageGroupAndList()
         }
       }
     },
     data () {
       return {
+        widthMap: {
+          1: '100%',
+          2: '50%',
+          3: ''
+        },
         dataMap :{
-          'unitArea': 'string',
           'projectName': 'string',
+          'unitArea': 'string',
           'fileUrl': 'img',
           'bayNumber': 'string',
           'roomNumber': 'string',
@@ -149,10 +171,47 @@
           'houseSpace-designHouseSpace': 'boolean', // 家政间
           'hallway-designHallway': 'boolean',  // 玄关
           'hallway-designHallwayCFDX': 'boolean'
-        }
+        },
+        // 设置分页数据
+        // {
+        //   '产品组1':{
+        //     1: [],
+        //     2: [],
+        //     3: []
+        // }
+        // }
+        pageObj: {
+
+        },
+        // 假分页 设置分页
+        // [
+        //   {
+        //     page: 1,
+        //     pages: 2
+        //   },
+        //   {
+        //     page: 1,
+        //     pages: 2
+        //   }
+        // ]
+        currentPageList: []
       }
     },
     methods: {
+      pagePrev(index) {
+        if(this.currentPageList[index].page === 1) {
+          return
+        }
+        // const page = this.currentPageList[index].page
+        this.currentPageList[index].page =  this.currentPageList[index].page - 1
+        // this.$set(this.currentPageList[index], 'page', page - 1 )
+      },
+      pageNext(index) {
+        if(this.currentPageList[index].page === this.currentPageList[index].pages) {
+          return
+        }
+        this.currentPageList[index].page =  this.currentPageList[index].page + 1
+      },
       getImageUrl(filePath) {
         if(filePath) {
           return process.env.VUE_APP_OSS_SRC + filePath
@@ -163,11 +222,66 @@
       getImgUrlList(imgList) {
         if(!imgList) { return [] }
         return (imgList.map((item) => { return process.env.VUE_APP_OSS_SRC + item.fileUrl }))
+      },
+      getPageGroupAndList() {
+        const pageArr = []
+        // 每个产品的当前页数与总页数数据
+        // [
+        // { page: 1, pages: 2  },
+        // { page: 1, pages: 2 }
+        // ]
+        const pageObjMap = {}
+        // 每个产品的分页数据源
+        // {
+        //   '产品1': { 1: [pageData], 2: [pageData]},
+        //   '产品2': { 1: [pageData], 2: [pageData]}
+        // }
+        this.tableData.forEach((item) => {
+          if(item.productionProperties && item.productionProperties.length > 0) {
+            pageArr.push({
+              page: 1,
+              pages: Math.ceil(item.productionProperties.length / 3) // 总页数为总数据除每页大小
+            })
+            item.productionProperties.forEach((product, index2) => {
+              if(!pageObjMap[item.productionName]) {
+                pageObjMap[item.productionName] = {}
+              }
+              // 每三个为一页 可自行设置
+              if(index2 % 3 === 0) {
+                pageObjMap[item.productionName][index2/ 3 + 1] = item.productionProperties.slice(index2,index2 + 3)
+              }
+            })
+          } else {
+            pageArr.push({
+              page: 1,
+              pages: 1
+            })
+          }
+        })
+        // 分页数据取值 pageObjMap[product.productName][pageArr[index].page]
+       this.currentPageList = pageArr
+       this.pageObj = pageObjMap
       }
     }
   }
 </script>
-
+<style scoped>
+  .position {
+    position: absolute;
+    top: 50%;
+    font-size: 16px;
+    cursor: pointer;
+    font-weight: 600;
+    color: #409eff;
+    transform: translateY(-50%);
+  }
+  .left {
+    left: 10px;
+  }
+  .right {
+    right: 10px;
+  }
+</style>
 <style lang="stylus">
   .table_container{
     width: 100%;
@@ -177,7 +291,7 @@
       flex-direction row
       .table_header {
         border-right 2px solid #ffffff
-        min-width 420px
+        min-width 385px
         .rowStyle{
           width 100%
           overflow hidden

src/components/unitCard/index.vue

@@ -3,6 +3,7 @@
     <div class="imgContainer">
       <viewer :images="getImgListUrl(imgList)" style="width: 100%;height: 100%">
         <img
+          style="max-width: 100%;"
           v-for="(item, index) in imgList"
           :src="getImgUrl(item.fileUrl)"
           :key="index"
@@ -92,7 +93,7 @@
   height: 235px;
   .imgContainer {
     margin auto
-    width 50%
+    width 60%
     height 100%
     .imgPreview {
       display block

src/views/ProductAnalysis/index.vue

@@ -136,7 +136,12 @@
            </div>
          </div>
          <div class="supplyAnalysisTable" v-if="showMode === 0">
-           <multi-header-table :header-width="42" :body-width="58" :header-data="headerTable" :table-data="productionProjectData"></multi-header-table>
+           <multi-header-table
+             v-if="productionProjectData.length > 0"
+             :header-width="30"
+             :body-width="70"
+             :header-data="headerTable"
+             :table-data="productionProjectData"></multi-header-table>
          </div>
        </div>
      </div>