vxeTable反转表格

文章目录

前言

前言

如果遇到列为动态值，行相对固定的情况，这种时候就需要用到行列反转，这里我以vxeTable表格为例。

在这里插入图片描述

直接上代码

        <vxe-gridref="tableRefRight":auto-resize="true":columns="dataColumn":data="tableData":loading="rightTableLoading":print-config="{}":show-header="true":sync-resize="true"borderheight="auto"resizable></vxe-grid>

created 钩子核心代码

    reverseTable(table, type) {let name = "";if (type === 1) {name = "nickName";} else if (type === 2) {name = "productName";} else if (type === 3) {name = "scenarioName";}// 构建初始化表格数据// 表体参数const buildData = this.originalTitle.map((col) => {const item = { col0: col[name], timeId: col.timeId };table.forEach((row, index) => {item[`col${index + 1}`] = { ...row };item[`col${index + 1}`].isLoading = false;item[`col${index + 1}`].newTag = null;});return item;});// 表头渲染参数let buildColumns = [{field: "col0",width: 150,fixed: "left",align: "center",title: "预排时间",},];table.forEach((item, index) => {buildColumns.push({field: `col${index + 1}`,width: 170,staffId: item.staffId,align: "center",title: item[name],slots: { default: `tag` },});});this.tableData = buildData;this.dataColumn = buildColumns;},