根据给出的代码把el-table中的姓名和项目名称互换，其中，中间数据不变更位置，下图有说明。麻烦提供完整代码，谢谢。

Question

<template>
  <div>
    <el-table :data="tableData" style="width: 100%">
      <el-table-column prop="name" label="姓名"></el-table-column>
      <el-table-column v-for="process in processList" :key="process.processId" :label="process.processName">
        <template slot-scope="scope">
          <el-tag style="margin: 0 2px;" v-if="hasRole(scope.row, process.processId, 'intentionManager')"
            type="danger">组长</el-tag>
          <el-tag style="margin: 0 2px;" v-if="hasRole(scope.row, process.processId, 'intentionMembers')"
            type="primary">组员</el-tag>
          <el-tag style="margin: 0 2px;" v-if="hasRole(scope.row, process.processId, 'intentionReviewer')"
            type="warning">主审</el-tag>
          <el-tag style="margin: 0 2px;" v-if="!hasRole(scope.row, process.processId, 'intentionManager') &&
            !hasRole(scope.row, process.processId, 'intentionMembers') &&
            !hasRole(scope.row, process.processId, 'intentionReviewer')
            ">无角色</el-tag>
        </template>
      </el-table-column>
    </el-table>
  </div>
 </template>
 
 <script>
 export default {
  data() {
    return {
      intentionHandlerList: {
        jsonHand: [
          { name: "宋会", oa: "SH" },
          { name: "李高", oa: "LIGAO" },
          { name: "王小明", oa: "WANGXIAOMING" },
        ],
        processList: [
          { processId: 289, processName: "33333333333" },
          { processId: 288, processName: "2222222222222" },
          { processId: 287, processName: "项目11111111" },
        ],
      },
      planProcessIntentionListByProcess: [
        {
          id: 28,
          intentionManager: "WANGXIAOMING",
          intentionMembers: "WANGXIAOMING",
          intentionReviewer: "WANGXIAOMING",
          planProcessId: 289,
        },
        {
          id: 29,
          intentionManager: "",
          intentionMembers: "WANGXIAOMING",
          intentionReviewer: "",
          planProcessId: 288,
        },
        {
          id: 30,
          intentionManager: "",
          intentionMembers: "",
          intentionReviewer: "WANGXIAOMING",
          planProcessId: 287,
        },
        {
          id: 31,
          intentionManager: "",
          intentionMembers: "LIGAO",
          intentionReviewer: "",
          planProcessId: 289,
        },
        {
          id: 32,
          intentionManager: "",
          intentionMembers: "LIGAO",
          intentionReviewer: "",
          planProcessId: 288,
        },
        {
          id: 33,
          intentionManager: "",
          intentionMembers: "LIGAO",
          intentionReviewer: "",
          planProcessId: 287,
        },
        {
          id: 34,
          intentionManager: "",
          intentionMembers: "",
          intentionReviewer: "SH",
          planProcessId: 289,
        },
        {
          id: 35,
          intentionManager: "",
          intentionMembers: "SH",
          intentionReviewer: "",
          planProcessId: 288,
        },
        {
          id: 36,
          intentionManager: "SH",
          intentionMembers: "",
          intentionReviewer: "",
          planProcessId: 287,
        },
      ],
    };
  },
  computed: {
    tableData() {
      const tableData = [];
      for (const handler of this.intentionHandlerList.jsonHand) {
        const rowData = { name: handler.name };
        for (const process of this.intentionHandlerList.processList) {
          const intention = this.planProcessIntentionListByProcess.find(
            (item) =>
              item.planProcessId === process.processId &&
              (item.intentionManager === handler.oa ||
                item.intentionMembers === handler.oa ||
                item.intentionReviewer === handler.oa)
          );
          rowData[process.processName] = intention ? intention : null;
        }
        tableData.push(rowData);
      }
      console.log(tableData, 'initDataList')
      return tableData;
    },
    processList() {
      return this.intentionHandlerList.processList;
    },
  },
  methods: {
    hasRole(row, processId, role) {
      const intention =
        row[
        this.processList.find((process) => process.processId === processId).processName
        ];
      return intention && intention[role] !== "";
    },
  },
 };
 </script>

Answer 1

<template>
  <div>
    <el-table :data="tableData" style="width: 100%">
      <el-table-column prop="name" label="姓名"></el-table-column>
      <!-- 你的 -->
      <!-- <el-table-column prop="name" v-for="process in processList" :key="process.processId" :label="process.processName">
        <template slot-scope="scope">
            <el-tag style="margin: 0 2px;" v-if="hasRole(scope.row, process.processId, 'intentionManager')"
              type="danger">组长</el-tag>
            <el-tag style="margin: 0 2px;" v-if="hasRole(scope.row, process.processId, 'intentionMembers')"
              type="primary">组员</el-tag>
            <el-tag style="margin: 0 2px;" v-if="hasRole(scope.row, process.processId, 'intentionReviewer')"
              type="warning">主审</el-tag>
            <el-tag style="margin: 0 2px;" v-if="!hasRole(scope.row, process.processId, 'intentionManager') &&
              !hasRole(scope.row, process.processId, 'intentionMembers') &&
              !hasRole(scope.row, process.processId, 'intentionReviewer')
              ">无角色</el-tag>

            <el-select size="mini" v-model="value" clearable placeholder="请选择">
                <el-option
                  v-for="item in options"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value">
                </el-option>
              </el-select>
          </template>

      </el-table-column> -->

      <!-- 我写的 -->
      <el-table-column
        prop="name"
        v-for="jsonHand in jsonHandList"
        :key="jsonHand.oa"
        :label="jsonHand.name"
      >
        <template slot-scope="scope">
          <el-tag
            style="margin: 0 2px"
            v-if="hasRole(scope.row, jsonHand.oa, 'intentionManager')"
            type="danger"
            >组长</el-tag
          >
          <el-tag
            style="margin: 0 2px"
            v-if="hasRole(scope.row, jsonHand.oa, 'intentionMembers')"
            type="primary"
            >组员</el-tag
          >
          <el-tag
            style="margin: 0 2px"
            v-if="hasRole(scope.row, jsonHand.oa, 'intentionReviewer')"
            type="warning"
            >主审</el-tag
          >
          <el-tag
            style="margin: 0 2px"
            v-if="
              !hasRole(scope.row, jsonHand.oa, 'intentionManager') &&
              !hasRole(scope.row, jsonHand.oa, 'intentionMembers') &&
              !hasRole(scope.row, jsonHand.oa, 'intentionReviewer')
            "
            >无角色</el-tag
          >

          <el-select size="mini" v-model="value" clearable placeholder="请选择">
            <el-option
              v-for="item in options"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
export default {
  name: "test",
  data() {
    return {
      options: [
        {
          value: "apportionManager",
          label: "项目组长",
        },
        {
          value: "apportionMembers",
          label: "项目组员",
        },
        {
          value: "apportionReviewer",
          label: "项目主审",
        },
      ],
      value: "",
      intentionHandlerList: {
        jsonHand: [
          { name: "宋会", oa: "SH" },
          { name: "李高", oa: "LIGAO" },
          { name: "王小明", oa: "WANGXIAOMING" },
          { name: "1明", oa: "W3AOMING" },
          { name: "3明", oa: "3XIAOMING" },
        ],
        processList: [
          { processId: 289, processName: "33333333333" },
          { processId: 288, processName: "2222222222222" },
          { processId: 287, processName: "项目11111111" },
        ],
      },
      planProcessIntentionListByProcess: [
        {
          id: 28,
          intentionManager: "WANGXIAOMING",
          intentionMembers: "WANGXIAOMING",
          intentionReviewer: "WANGXIAOMING",
          planProcessId: 289,
        },
        {
          id: 29,
          intentionManager: "",
          intentionMembers: "WANGXIAOMING",
          intentionReviewer: "",
          planProcessId: 288,
        },
        {
          id: 30,
          intentionManager: "",
          intentionMembers: "",
          intentionReviewer: "WANGXIAOMING",
          planProcessId: 287,
        },
        {
          id: 31,
          intentionManager: "",
          intentionMembers: "LIGAO",
          intentionReviewer: "",
          planProcessId: 289,
        },
        {
          id: 32,
          intentionManager: "",
          intentionMembers: "LIGAO",
          intentionReviewer: "",
          planProcessId: 288,
        },
        {
          id: 33,
          intentionManager: "",
          intentionMembers: "LIGAO",
          intentionReviewer: "",
          planProcessId: 287,
        },
        {
          id: 34,
          intentionManager: "",
          intentionMembers: "",
          intentionReviewer: "SH",
          planProcessId: 289,
        },
        {
          id: 35,
          intentionManager: "",
          intentionMembers: "SH",
          intentionReviewer: "",
          planProcessId: 288,
        },
        {
          id: 36,
          intentionManager: "SH",
          intentionMembers: "",
          intentionReviewer: "",
          planProcessId: 287,
        },
      ],
    };
  },
  computed: {
    tableData() {
      const tableData = [];

      // 你的
      // for (const handler of this.intentionHandlerList.jsonHand) {
      //   const rowData = { name: handler.name };
      //   for (const process of this.intentionHandlerList.processList) {
      //     const intention = this.planProcessIntentionListByProcess.find(
      //       (item) =>
      //         item.planProcessId === process.processId &&
      //         (item.intentionManager === handler.oa ||
      //           item.intentionMembers === handler.oa ||
      //           item.intentionReviewer === handler.oa)
      //     );
      //     rowData[process.processName] = intention ? intention : null;
      //   }
      //   tableData.push(rowData);
      // }

      // 我写的
      for (const process of this.intentionHandlerList.processList) {
        const rowData = { name: process.processName };
        rowData.id = process.processId;
        for (const handler of this.intentionHandlerList.jsonHand) {
          const intention = this.planProcessIntentionListByProcess.find(
            (item) => {
              return (
                item.planProcessId === process.processId &&
                (item.intentionManager == handler.oa ||
                  item.intentionMembers == handler.oa ||
                  item.intentionMembers === handler.oa)
              );
            }
          );
          rowData[handler.name] = intention ? intention : null;
        }

        tableData.push(rowData);
      }
      console.log(tableData);
      return tableData;
    },

    // 我写的
    jsonHandList() {
      return this.intentionHandlerList.jsonHand;
    },

    // 你写的
    processList() {
      return this.intentionHandlerList.processList;
    },
  },
  methods: {
    hasRole(row, oa, role) {
      const intention =
        row[this.jsonHandList.find((item) => item.oa === oa).name];
      return intention && intention[role] !== "";
    },
  },
};
</script>
<style scoped>
.el-select {
  width: 100px;
}
</style>