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..