前言

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

直接上代码

        <vxe-grid
          ref="tableRefRight"
          :auto-resize="true"
          :columns="dataColumn"
          :data="tableData"
          :loading="rightTableLoading"
          :print-config="{}"
          :show-header="true"
          :sync-resize="true"
          border
          height="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;
    },