动态添加表头和数据,并处理返回数据

          <!-- 价格 -->
          <template slot-scope="scope" slot="discountPriceStr">
            <div style="width: 170px;cursor: pointer;text-align:left" @click="getMoney(scope.row)">
              建议销售价: {{ scope.row.discountPriceStr }}</br>
              平台收入: {{ scope.row.platformRevenue }}</br>
            </div>
          </template>


或--------------------------------者---------------------------------
<template>
               <el-table
                 :data="distributionPhysicalGoodsInfoVOList" style="width: 80%;margin-left:20px;margin-top:15px" v-if="distributionPhysicalGoodsInfoVOList&&distributionPhysicalGoodsInfoVOList.length>0"
                 border>
                 <el-table-column
                   header-align="center"
                   prop="discountPriceStr"
                   label="渠道价格(元)"
                   align="left"
                   width="180">
                   <template slot-scope="scope">
                    <div style="width: 160px;cursor: pointer" @click="getMoneyList(scope.row)">
                      建议销售价:{{scope.row.discountPriceStr}}</br>
                      平台收入:{{scope.row.platformRevenue}}</br>
                     </div>
                   </template>
                 </el-table-column>
                 <el-table-column
                   prop="distributionGroup"
                   label="分组"
                   align="center"
                   width="180">
                   <template slot-scope="scope">
                    <div v-html="scope.row.distributionGroup">
                     {{scope.row.distributionGroup}}
                     </div>
                    </template>
                 </el-table-column>
                 <el-table-column
                   prop="commissionType"
                   align="center"
                   label="分佣方式">
                 </el-table-column>
                 <el-table-column
                   prop="level"
                   align="center"
                   label="等级">
                   <template slot-scope="scope">
                      <div style="cursor: pointer">
                       普通社员</br>
                       高级社员</br>
                      </div>
                    </template>
                 </el-table-column>
                 <el-table-column
                   prop="ratioAndMoney"
                   align="center"
                   label="分佣比例/金额(元)">
                   <template slot-scope="scope">
                     <p v-html="scope.row.ratioAndMoney">{{scope.row.ratioAndMoney}}</p>
                   </template>
                 </el-table-column>
               </el-table>
             </template>


分割线-------------------------------------------------------

<!-- 价格弹窗 -->
      <el-dialog :visible.sync="dialogsMoney" width="50%" append-to-body v-if="dialogsMoney"
        :close-on-click-modal="false">
        <el-table :data="tableMoneyList" style="width: 80%;margin-left:100px;"
          v-if="tableMoneyList && tableMoneyList.length > 0">
          <el-table-column v-for="title in tableTitle" :key="title.prop" :prop="title.prop" :label="title.label"
            width="180">
          </el-table-column>
          <el-table-column label="价格(元)*:" align="center" prop="discountPrice" width="120">
            <template slot-scope="{ row }">
              <el-input v-model="row.discountPrice" disabled placeholder=""></el-input>
            </template>
          </el-table-column>
          <el-table-column label="库存(个)*:" align="center" prop="stock" width="120">
            <template slot-scope="{ row }">
              <el-input v-model="row.stock" disabled placeholder=""></el-input>
            </template>
          </el-table-column>
          <el-table-column label="规格编码:" align="center" prop="code" width="120">
            <template slot-scope="{ row }">
              <el-input v-model="row.skuId" disabled placeholder=""></el-input>
            </template>
          </el-table-column>
          <el-table-column label="重量(kg):" align="center" prop="weight" width="120">
            <template slot-scope="{ row }">
              <el-input v-model="row.weight" disabled placeholder=""></el-input>
            </template>
          </el-table-column>
          <el-table-column label="体积(㎡):" align="center" prop="volume" width="120">
            <template slot-scope="{ row }">
              <el-input v-model="row.volume" disabled placeholder=""></el-input>
            </template>
          </el-table-column>
        </el-table>
      </el-dialog>



tableTitle: [],
tableMoneyList: [],


    getMoney (row) {
      if (row.skuList !== null) {
        this.dialogsMoney = true;
        // 固定字段
        let titleList = [];
        var valueList = [];
        var skuList = [...row.skuList]
        console.log(row.skuList[0].specs, 'row.skuList[0].specs')

        skuList.forEach(item => {
          //循环给每一条的数据加值
          let obj = {}
          let list = this.sortArr(item.specs, 'name')
          //循环将处理好的对象加到item里
          list.forEach(i => {

            const key = i.name;
            const value = i.data.join(',');
            item[key] = value;
          })

        })
        skuList.forEach((item, index) => {
          let old = []
          var newObj = []
          if (item) {
            old = Object.keys(item);
          }
          if (skuList[index + 1]) {
            newObj = Object.keys(skuList[index + 1])
          }

          console.log(old, newObj)
          if ((index < skuList.length) && old > newObj) {
            console.log('if')
            valueList = old

          } else {

            valueList = newObj
          }

        })
        valueList.forEach(item => {

          if (item != 'skuId' && item != 'specs' && item != 'discountPrice' && item != 'stock' && item != 'code' && item != 'weight' && item != 'volume' && item != 'bskuId') {
            titleList.push({
              prop: item,
              label: item,
            })
          }



        })
        this.tableTitle = titleList;
        this.tableMoneyList = skuList;


      }
    },

 sortArr (arr, str) {
      var _arr = [],
        _t = [],
        // 临时的变量
        _tmp;

      // 按照特定的参数将数组排序将具有相同值得排在一起
      arr = arr.sort(function (a, b) {
        var s = a[str],
          t = b[str];

        return s < t ? -1 : 1;
      });

      if (arr.length) {
        _tmp = arr[0][str];
      }
      // console.log( arr );
      // 将相同类别的对象添加到统一个数组
      for (var i in arr) {
        if (arr[i][str] === _tmp) {
          _t.push(arr[i]);
        } else {
          _tmp = arr[i][str];
          _arr.push(_t);
          _t = [arr[i]];
        }
      }
      // 将最后的内容推出新数组
      _arr.push(_t); //获取到所有整合数据
      console.log(_arr);//可以得到图三
      // 终极整合
      var integration = [];
      _arr.forEach((item) => {
        var eee = { name: "", data: [] };
        item.forEach((self) => {
          if (eee.name != self.name) {
            eee.name = self.name;
            eee.data.push(self.value);
          } else {
            eee.data.push(self.value);
          }
        });
        integration.push(eee);
      });
      return integration;
    },

后端返回:

  • 3
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值