Vue--构建亚马逊多账号的后台数据展示

Posted 2023-04-01 HaveAGoodDay.

效果展示：

根据自创的账号个数来创建对应的表格个数

 移动到对应商品时展示该商品的日出售变化情况

 设计思路：

        获取亚马逊平台个人账号数据传入自定义组件<WeekTable>

        <WeekTable>组件获取到数据后，就会重载DOM元素内容。我们在组件内将得到的数据需要的字段进行筛选,创建需要的数据dataAll

         创建自己需要的数据dataAll后，通过该数据生成表格

                想要达到表内容是动态，表标题是固定的需要创建两个表格，将表头放置一个表格内，表内容放置另一个表格中。将表中每行数据绑定鼠标移入移出事件来控制显示每日订单变化表

         当鼠标移入某行时，data中show,opt就会发生变化

         当data中数据发生变化时，我们自定义组件<ShowOpt>参数变化，就会重新渲染DOM

 

         根据dataAll再生成options调用echarts生成图表

 

 

Vue.filter 过滤器

【过滤器】

import Vue from ‘../../../node_modules/vue/dist/vue‘;

// 后台数据与前端展示数据需要换算，与后台交互的请求的参数是不需要。假如说前端展示价格是按照元来算，而后台提供的数据是按分来算，在提交给后台，还是按照分来算。

// 全局过滤器
Vue.filter(‘YuanToFen‘, function (value) {
  if (!Number(value)) return 0;
  value = Number(value);
  return Number(value) / 100;
});

const app = new Vue({
  // el: ‘#app‘,
  template: ‘<div @click="testhandler" ref="test">{{ price | YuanToFen }} content</div>‘,
  data: {
    price: 100, // 以分为单位
  },
  // 本地创建过滤器
  filter: { 
    YuanToFen (value) {
      if (!Number(value)) return 0;
      value = Number(value);
      return Number(value) / 100;
    },
  },
});

Vue.config.devtools = false;
// Vue.config.silent = true; // 取消vue的报错信息
app.$mount(‘#app‘);