index.vue

<template>
 <div class="table_container" :style="{ zoom: zoom }">
   <div class="table_wrap">
     <div class="table_header" :style="{ width: headerWidth + '%'}">
       <el-row v-for="(item,index) in headerData" :key="index"
               :class="{ 'heighter' : item.cellHeight, 'justifyRow': tableData instanceof Array ? index < 2 : index < 1 }"
         >
         <div  class="rowStyle table_header__cell-100" v-if="!item.children">{{item.trName}}</div>
         <div  class="rowStyle" v-else>
           <el-col :span="4">{{item.trName}}</el-col>
           <el-col :span="20">
             <el-row  v-for="(item2,index2) in item.children" :key="index2">
               <div class="rowStyle table_header__cell"  v-if="!item2.children">{{item2.trName}}</div>
               <div class="rowStyle"  v-else>
                 <el-col  :span="4">{{item2.trName}}</el-col>
                 <el-col :span="20">
                   <el-row v-for="(item3,index3) in item2.children" :key="index3"
                           :class="{'table_header__cell': true,
                                    'table_header_cell-34': index3 !== item2.children.length - 1 || item3.trName === '是否设厨房动线'}">
                     {{item3.trName}}
                   </el-row>
                 </el-col>
               </div>
             </el-row>
           </el-col>
         </div>
       </el-row>
     </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;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', 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>
               </el-col>
           </div>
       </div>
       <div v-else style="height: 100%;display: flex;align-items: center;">
         <div style="width: 100%;text-align: center;margin: auto">
           <svg-icon icon-class="houseNoData" style="width: 200px;height: 200px" />
           <div>暂无数据</div>
         </div>
       </div>
     </div>
     <div class="table_body tableObject" v-else :style="{ width: bodyWidth + '%'}">
       <el-col :span="24" style="min-width: 120px">
         <el-row v-for="(value, key) in dataMap" v-if="key !== 'fileUrl' && key !== 'projectName'" :key="key" :class="{ 'dataCell': true, 'imgHeigth': value === 'img' }">
           <div v-if="value === 'string'">{{tableData[key] || '--'}}</div>
           <div v-else-if="value === 'boolean' && tableData[key] === 1" class="circle block"></div>
           <div v-else-if="value === 'boolean' && tableData[key] === 0" class="circle hollow"></div>
           <div v-else-if="value === 'boolean' && !tableData[key]" >--</div>
         </el-row>
       </el-col>
     </div>
   </div>
 </div>
</template>

<script>
  export default {
    name: "multilTable",
    props: {
      headerData: {
        type: Array,
        default () {
          return []
        }
      },
      tableData: {
        type: [Array,Object]
      },
      headerWidth: {
        type: Number
      },
      bodyWidth: {
        type: Number
      },
      zoom: {
        type: Number,
        default() {
          return 1
        }
      }
    },
    beforeMount() {
      if(this.tableData instanceof Array) {
        this.getPageGroupAndList()
      }
    },
    watch: {
      tableData: {
        deep: true,
        handler(val) {
          console.log(val, '多级表头的值发生改变！')
          this.getPageGroupAndList()
        }
      }
    },
    data () {
      return {
        widthMap: {
          1: '100%',
          2: '50%',
          3: ''
        },
        dataMap :{
          'projectName': 'string',
          'unitArea': 'string',
          'fileUrl': 'img',
          'bayNumber': 'string',
          'roomNumber': 'string',
          'hallNumber': 'string',
          'toiletNumber': 'string',
          'southWidth': 'string',
          'liveRoomWidth': 'string',
          'masterRoomWidth': 'string',
          'guestRoomWidth': 'string',
          'liveRoom-largeHorizontalHall': 'boolean', // 起居室-大横厅
          'liveRoom-balcony': 'boolean', // 起居室-外设阳台
          'liveRoom-LDK': 'boolean', // 起居室-LDK
          'masterRoom-masterBathRoom': 'boolean', // 主卧-主卫
          'masterRoom-cloakRoom': 'boolean', // 主卧-衣帽间
          'guestRoom-guestBathRoom': 'boolean', // 客卧-客卫
          'kitchen-LDK': 'boolean', // 厨房-LDK
          'kitchen-SCWesternCook': 'boolean', // 厨房-中西厨分离
          'kitchen-hallwayCFDX': 'boolean', // 厨房-玄关设厨房独立动线
          'kitchen-kitchenStyle': 'string',  // 厨房-厨房形式
          'restaurant-LDK': 'boolean', // 餐厅-LDK
          'restaurant-independentWindow': 'boolean', // 餐厅-独立开窗
          'bookRoom-wideHallSingleGuard': 'string', // 书房-大宽厅/独立
          'restRoom-brightBathRoom': 'boolean', // 卫生间-明卫
          'restRoom-dryWetDepart': 'boolean', // 卫生间-干湿分离
          'restRoom-function': 'string', // 卫生间-功能
          'bathRoom-brightBathRoom': 'boolean', // 主卫
          'bathRoom-dryWetDepart': 'boolean',
          'bathRoom-function': 'string',
          'balcony-designHalcony': 'boolean', // 阳台
          'balcony-location': 'string',
          'storeRoom-designStoreRoom': 'boolean', //储藏间
          '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
        } else {
          return ''
        }
      },
      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%;
    .table_wrap{
      width 100%
      display flex
      flex-direction row
      .table_header {
        border-right 2px solid #ffffff
        min-width 385px
        .rowStyle{
          width 100%
          overflow hidden
          display flex
          align-items center
          justify-content center
        }
        .justifyRow {
          height 34px
        }
        .table_header__cell {
          height 32px
          line-height 34px
        }
        .table_header_cell-34{
          height 34px
        }
        .table_header__cell-100{
          height 100%
        }
        .el-col {
          text-align center
          background-color: rgb(222,235,247);
          border-right none
        }
        .el-row {
          box-sizing border-box
          text-align center
          background-color: rgb(222,235,247);
          line-height 32px
          border-bottom 2px solid #ffffff
          border-left 2px solid #ffffff
        }
        .el-col-4 {
          height 100%
          border none
        }
        .el-col-20 {
          .el-row:last-child {
            border-bottom  none
          }
        }
        .heighter {
          height 85px
          line-height 85px
        }
        .dealHeigth{
          line-height 34px
        }
      }
      .table_body {
        .productionName {
          overflow hidden
        }
        .dataCell {
            box-sizing border-box
            text-align center
            background-color: rgb(222,235,247);
            border-bottom 2px solid #ffffff
            height 34px
            line-height 32px
            position relative
        }
        .prodName {
        }
        .prodName:nth-child(3) {
          border-right none
        }
        .imgHeigth {
          height 85px
          line-height 85px
        }
        .productionDetail{
          .el-row {
          }
          .el-row:last-child {
            border-bottom none
          }
          .dealHeigth{
            line-height 34px
          }
        }
        .el-col-8:last-child {
          .productionDetail:last-child {
            .el-row {
              border-right none
            }
          }
        }
        .circle {
          box-sizing: border-box;
          width: 12px;
          height: 12px;
          border: 1px solid #000000;
          border-radius: 50%;
          margin 0 auto
          position absolute
          left 50%
          top 50%
          transform translate(-50%, -50%)
        }
        .block {
          background-color: #000;
        }
        .hollow {
          background-color: transparent;
        }
      }
    }
  }
</style>