Vue + elementUI table 根据统计方式动态更新表头及数据及视图

需求展现

顶部绿框选项变化时页面请求接口,数据变化,红框内选项变化不再请求接口,而仅是对数据进行重新排序,重新渲染表格数据即可。红框内选项对应表头的变化,选中的选项对应的数据始终在表头的第三列,并且对应第二列的占比更新(图2)。

 

图2 

 

 

逻辑

页面多处用到 红框ratio组件 及table表格组件  ,进行封装

ratio 组件 传入的props => ratioName当前的组件名称/ ratio-change 选项变化时发射回来的事件/downParams 下载相关(下载方法一起封在了这个组件里)

<dealTrendRatio ratioName="pingtai" @ratio-change="ratioChange" :downParams="downParam" />

 ratio-change 组件发射回来事件接收,先判断是那个组件发生了变化,然后触发各自组件的绘图方法(table数据是在组件的绘图方法里处理的,比较统一)

 ratioChange() {
      // console.log("=====================", arguments)
      switch (arguments[1]) {
        case 'pingtai':
          this.pingtaiRatio = arguments[0];
          this.pingtaiChart(this.pingtaiData);
          break;
        case 'zhucedi':
          this.zhucediRatio = arguments[0];
          this.sellerMapChart(this.zhucediData);
          break;
        case 'dengji':
          this.dengjiRatio = arguments[0];
          this.handleGradeData(this.gradeTable);
          break;
        case 'fans':
          this.fansRatio = arguments[0];
          this.handleFansData(this.fansData);
          break;
        default:
          this.kaidianRatio = arguments[0];
          this.shopRatingChart(this.kaidianData);
          break;
      }
    },

this.pingtaiChart(this.pingtaiData)为例,this.pingtaiData 是存储的接口数据,只要顶部绿框选项不变,不请求接口,那么页面的数据不变,绘图的代码省略了,图形绘制之后,赋值对应的table表格数据,并根据单选框的选项排序

pingtaiChart.setOption(option);
pingtaiChart.resize();
let sort = this.pingtaiRatio == 'num' ? 'shop_num' : this.pingtaiRatio == 'sale' ? 'month_sale' : 'month_amount';
this.pingtaiTable = temp.sort(compare(sort)).reverse();

 

table 组件  props传入表格数据 以及ratio选项值 表头根据ratio 判断 数据展示顺序

先看一张图会理解的更加容易 粗体代表选中的ratio 下划线表示要展示的数据顺序,图画出来,照猫画虎即可。

 

代码实现 使用vue的 v-if/v-else-if/v-else 语法

有两处需注意

1.表格列若添加sortable排序功能,必须指定prop,即使数据通过template自定义,否则不生效

2.自定义表头,slot='header' 如果使用到组件的定义数据data, 必须添加 slot-scope="scope" ,否则不生效

<el-table-column :label="pingtaiRatio == 'num' ? '动销店铺数' : pingtaiRatio == 'sale' ? '销量' : '销售额'" align="center" sortable prop="shop_num" width="110">
                    <template slot-scope="scope">
                  <p class="xiao-red-color" v-if="pingtaiRatio == 'num'">{{ scope.row.shop_num | formatNum }}</p>
                  <p class="xiao-red-color" v-else-if="pingtaiRatio == 'sale'">{{ scope.row.month_sale | formatNum }}</p>
                  <p class="xiao-red-color" v-else>{{ scope.row.month_amount | formatNum }}</p>
                </template>
      </el-table-column>
<el-table-column :label="pingtaiRatio == 'sale' ? '销售额' : '销量'" align="center" sortable prop="month_sale">
                <template slot-scope="scope">
                  <p class="xiao-red-color" v-if="pingtaiRatio == 'sale'">{{ scope.row.month_amount | formatNum }}</p>
                  <p class="xiao-red-color" v-else>{{ scope.row.month_sale | formatNum }}</p>
                </template>
</el-table-column>
<el-table-column :label="pingtaiRatio == 'num'? '销售额' : '动销店铺数'" align="center" sortable prop="month_amount" width="110">
                <template slot-scope="scope">
                  <p class="xiao-red-color" v-if="pingtaiRatio == 'num'">{{ scope.row.month_amount | formatNum }}</p>
                  <p class="xiao-red-color" v-else>{{ scope.row.shop_num | formatNum }}</p>
                </template>
</el-table-column>

 

svn commit..

  • 1
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值