element table 合计行不显示问题,当从后端查询到第一次数据为空时,并且赋值给tableData合计行不显示,为使合计行一直显示,当数据为空时,给tableData其中一个属性值复制为“空”

 

 <div class="d-flex aside-width">
             <div class="react-right bg-color-blue mr-3"  :class="{ 'active-button': activeButton === '配件' }" @click="handleClick('配件')">
              <span class="text fw-b" style="font-size:24px;"><b>配件</b></span>
            </div>
             <div class="react-right bg-color-blue mr-3"  :class="{ 'active-button': activeButton === '天成' }" @click="handleClick('天成')">
              <span class="text fw-b" style="font-size:24px;"><b>天成</b></span>
            </div>
		
		</div>

<el-table 
                v-if="showTable2"
                :showTable="showTable"
                class="my-table"
                :data="tableData"
                :class="{ 'blurred': !config_bottomleft1.isVisible }"
                align='center'
                style="width: 100%;margin-top:20px"
                :height="440"
                
              :summary-method="getSummaries"
                show-summary = 'true'
                >
                <el-table-column
                  prop="contraFee"
                  label="金额"
                  align="center"
                  width="100px"
                  >   </el-table-column>
           </el-table>


 data() {
    return {
      tableData: [],
       showEcharts:nuull,
        showTable:nuull,
    }
  }
methods: {
handleClick(by1Value) {
     
       this.activeButton = by1Value;
       this.TableData(by1Value);
    
    },
   TableData(by1Value) {

        const axiosInstance = axios.create({
           baseURL: 'http://127.0.0.1:8080'
         });

         axiosInstance.get('/configList', { params: { by1: by1Value } })
              .then(function(response) {
               let TableData2 = secondResponse.data;
               this.tableData=TableData2
                      
                if(this.tableData.length ===0){
                            this.tableData=[{contraFee:''}]      
                      }
                            this.showEcharts =false
                            this.showTable = true    

                 }.bind(this))
                       .catch(error => {
                        console.error('Error fetching data:', error);
                      });
   },

    getSummaries(param) {
        debugger
        const { columns, data } = param;
        const sums = [];
        columns.forEach((column, index) => {
        
          if (index === 0) {
              sums[index] = '合计';
          } 
          else {
            const values = data.map(item => Number(item[column.property]));
            if (data.length === 0) {
                sums[index] = 0;  // 数据为空时合计为 0
            } else if (!values.every(value => isNaN(value))) {
                sums[index] = values.reduce((prev, curr) => {
                    const value = Number(curr);
                    return !isNaN(value) ? prev + value : prev;
                }, 0);
            } else {
                sums[index] = ' ';
            }
          }
        });
       
       //sums[1]='2';

       //this.$nextTick(() => {
            // if (data.length === 0) {
            // return sums.map((sum, index) => (index === 0 ? '合计' : 0));
            // } 
           
        // })

         return sums;
      },
}

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值