vue.js javascript ecmascript vue 表格 侧边(竖向)表头展示数据

实现效果: 表格区域：

height="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' }"

>

v-for="(item, index) in transTitle"

:label="item"

:key="index"

align="center"

>

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

params: { ...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链接

推荐阅读

 您阅读本篇文章共花了：