vue 表格侧边(竖向)表头展示数据

实现效果:

表格区域：

 <!-- 表格区域  :loading="loading"--><el-tableheight="calc(100% - 60px)":data="transData"border:header-cell-style="{'text-align': 'center',background: '#F5F6FA',color: '#646E92',}"style="width: 96%;margin-top: 30px;margin-left: 25px;color: #666e92;font-size: 14px;":cell-style="{ 'text-align': 'center' }"><el-table-columnv-for="(item, index) in transTitle":label="item":key="index"align="center"><template slot-scope="scope">{{ scope.row[index] }}</template></el-table-column></el-table>

data 属性定义：

      // originData 为表头展示数据 保证数组里每一个对象中的字段顺序, 从上到下 一次对应显示表格中的从左到右originTitle: ['月份', '名称', '站点', '月总销售额', '亚马逊物流赔偿金额', '买家支付的运费', '邮费积分', '买家支付礼品卡金额', '退款中的亚马逊物流交易费返款', '退款中的平台费返款', '退货后的促销返款', '销售退款总额', '退款中的运费', '促销折扣额/促销回报', '退款管理费', '退款中的积分费用', '广告费用', '尾程配送费', '平台佣金扣点', '秒杀费用', 'Coupon费用', '店租', 'FBA库存仓储费', '其他', 'VAT消费税', '汇率', '推广费', '商品成本', '商品头程', '利润（人民币）', '利润率', '店铺压货成本', '下单商品成本'],transTitle: [], // transTitle 该标题为转化后的标题, 注意多一列,  因为原来的标题变成了竖着显示了, 所以多一列标题, 第一个为空即可transData: [] //表格数据

js 获取后台数据转化成展示数据

 // 查询数据query() {this.transData = []this.transTitle = []//条件筛选 XXX// 接口获取数据this.axios.get("/api/XXXXlist", {// , sku: this.$data.formInline.sku, type: this.$data.formInline.typeparams: { ...o }}).then(this.putdata, err => {console.log("err", err);});},//数据转化方法putdata(resp) {console.log(resp.data, 'resp.data')this.$data.tableData =resp.data.data && resp.data.data? resp.data.data : [];// 数组按矩阵思路, 变成转置矩阵if (this.$data.tableData.length > 0) {let matrixData = this.$data.tableData.map((row) => {let arr = []for (let key in row) {// 按表头的顺序 一个一个加入进去 我的表格展示有顺序要求 不能改变位置 所以取到数据一一对应// 如果没有顺序要求 或者后端返回的数据没问题 直接push 不需要判断  arr.push(row[key])if (key == 'belongMonthly') {arr[0] = moment(row[key]).format("YYYY-MM")} else if (key == 'shopName') {arr[1] = row[key]} else if (key == 'site') {arr[2] = row[key]} else if (key == 'yzxse') {arr[3] = row[key]} else if (key == 'ymxwlpcje') {arr[4] = row[key]} else if (key == 'mjzfyf') {arr[5] = row[key]} }return arr})console.log(matrixData)// 加入标题拼接最终的数据if (matrixData.length > 0) {this.transData = matrixData[0].map((col, i) => {return [this.originTitle[i],...matrixData.map(row => {return row[i];  //因为数据多出一行，需要从索引1开始})];});// 横向展示序号 this.transTitle = matrixData.map((col, i) => {return [i + 1];}); this.transTitle.unshift('')}console.log(this.transData)}},

借鉴文章：学生题型demo链接

vue 表格侧边(竖向)表头展示数据相关推荐

vue表格实现固定表头首列
下载地址 vue表格实现固定表头首列 dd:
Vue2.x-01点击按钮弹出子Vue组件，遍历JSON展示数据
文章目录概述实现过程 Step1: 父组件设置Button按钮 Step2: 这里使用了showHandlerFlag来控制子组件是否显示,所里需要在data中定义下这个变量 Step3: 引用声 ...
Qt实现表格内进度条展示数据
Qt 中用代理处理Model中的数据展示形式. The QAbstractItemDelegate class is used to display and edit data items from ...
Element表格的竖向斑马纹、数据不同改变颜色（正数颜色为红色，负数颜色为绿色）
数字颜色效果图:
Datatables——一款前端好用的表格插件,本地json模拟数据实现表格分页查询
在做管理后台功能时,经常需要用到表格展示数据,从数据库查询返回的数据,返回集合或数组到前台,然后前台将数据渲染成表格,方便直观展示数据,通常还需要结合分页.查询.排序.Datatables是一款符合上 ...
VUE+ElementUI生成Excel模板导入数据生成表格(自适应)
VUE+ElementUI生成Excel模板导入数据生成表格(自适应) 最近项目需求,需要根据条件查询对应数据的参数(每条数据的参数名称和个数都不一样) ,生成Excel表格模板,再通过Excel模 ...
vue获取table一列数据_VUE table表格动态添加一列数据,新增的这些数据不可以编辑（v-model绑定的数据不能实时更新）...
一.问题用elementUi横着增加一行数据没毛病,可以操作添加一列,这新增的这一列, 第一次去赋值的时候值是改了, 但没生效点击下一行时值就变过来二.原因横向添加是复制上面的某一条数据 ...
表格：表格作用，展示数据
表格:使用table标签定义表格,每个表格有若干行(由tr定行),每行被分为若干个单元格(td)定义. 表格作用,展示数据 td:单元格:包括各种标签,默认样式文字局左显示垂直居中 th表头单元格, ...
Vue表格中，对数据进行转换、处理
众所周知,后端从Mysql取出的数据,一般是很难单独处理某一个Key的数据的(需要处理的话,可能会浪费大量的性能.而且对页面加载时间有很大的影响),所以,从数据库取出的数据.只能由前端进行处理.但是在 ...

vue 表格侧边(竖向)表头展示数据

vue 表格侧边(竖向)表头展示数据相关推荐

最新文章

热门文章

vue 表格 侧边(竖向)表头展示数据

vue 表格 侧边(竖向)表头展示数据相关推荐

最新文章

热门文章

vue 表格侧边(竖向)表头展示数据

vue 表格侧边(竖向)表头展示数据相关推荐