完成多行动态合并功能

licp

2024-04-09 2b4272b2372187107f0fbdb2dbe8d0cd50ea4060

 src/components/tool/value-table.vue

@@ -34,6 +34,22 @@
   .body {
      overflow-x: hidden;
   }

  .handleBtn{
    border: none;
    padding: 0;
    color: #409EFF;
    background: transparent;
  }

  .handleBtn:hover{
    background: transparent;
  }

  .handleBtn.is-disabled{
    color: #C0C4CC;
  }

</style>
<style>
   /* .value-table .highlight-warning-row-border td {
@@ -69,6 +85,10 @@
   .value-table .el-upload-dragger {
      width: 100%;
   }

  .handleBtn.is-disabled .el-upload:focus{
    color: #C0C4CC !important;
  }
</style>

<template>
@@ -111,7 +131,23 @@
               <template slot-scope="scope">
                  <el-button v-for="(a, ai) in data.do" :key="ai" :type="a.type"
                     :disabled="a.disabFun ? a.disabFun(scope.row,scope.$index) : false"
                     @click="main(scope.row, a)">{{a.font}}</el-button>
                     @click="main(scope.row, a)" class="handleBtn">
              <span v-if="a.type!='upload'">{{a.font}}</span>
              <el-upload
              :action="javaApi+a.uploadConfig.url+'?id='+scope.row.id"
              v-else
              :disabled="a.disabFun ? a.disabFun(scope.row,scope.$index) : false"
              :on-success="handleSuccessUp"
              :show-file-list="false"
              :headers="token"
              name="file"
                     :accept='a.uploadConfig.accept'
                     :on-error="onError"
              ref='upload'
              style="background: transparent;">
                           <span>{{a.font}}</span>
                        </el-upload>
            </el-button>
               </template>
            </el-table-column>
         </el-table>
@@ -348,6 +384,12 @@
            token: null,
            fileList: [],
            init: true,
        spanList:[
          // {
          //   arr:[],
          //   position:0
          // }
        ],
        testArr: [],
        testPosition: 0,
         }
@@ -393,9 +435,14 @@
        });
      },
      spanMethod({ row, column, rowIndex, columnIndex }){
        if(this.data.spanConfig!=undefined&&this.data.spanConfig.rows){
          if (columnIndex === this.data.spanConfig.rows.index) {
            const _row = this.testArr[rowIndex];
        if(this.data.spanConfig!=undefined&&this.data.spanConfig.rows&&this.data.spanConfig.rows.length>0){
          let i = null;
          let obj = this.data.spanConfig.rows.find((item,index)=>{
            i = index;
            return item.index==columnIndex
          })
          if(obj){
            const _row = this.spanList[i].arr[rowIndex];
            const _col = _row > 0 ? 1 : 0;
            return {
              rowspan: _row,
@@ -472,10 +519,18 @@
                     })
                  }
               }
          if(this.data.spanConfig!=undefined&&this.data.spanConfig.rows){
            this.testArr = []
            this.testPosition = 0
            this.rowspan(this.testArr, this.testPosition, this.data.spanConfig.rows.name);
          if(this.data.spanConfig!=undefined&&this.data.spanConfig.rows&&this.data.spanConfig.rows.length>0){
            this.spanList = [];
            this.data.spanConfig.rows.forEach((item,index)=>{
              this.spanList.push({
                arr:[],
                position:0
              })
              this.rowspan(this.spanList[index].arr, this.spanList[index].position, item.name);
            })
            // this.testArr = []
            // this.testPosition = 0
            // this.rowspan(this.testArr, this.testPosition, this.data.spanConfig.rows.name);
          }
               this.loading = false
            }).catch(e => {
@@ -833,7 +888,13 @@
               count += a.font.length
            })
            return count * 15 + 60 + 'px'
         }
         },
      handleSuccessUp(response){
        if(response.code==200){
          this.$message.success('上传成功')
          this.selectList()
        }
      }
      }
   }
</script>