vue3 动态合并单元格并且 动态显示输入框或者下拉框 附（效果图）

效果如下

代码如下

  <el-table
        row-key="orgId"
        :row-style="rowstyle"
        :default-expand-all="true"
        show-overflow-tooltip
        height="calc(100vh - 200px)"
        :data="dialogTable"
        :span-method="objectSpanMethod2"
        @expand-change="handleCollapse"
        border
      >
        <!-- :tree-props="{ children: 'detailList' }" -->
        <el-table-column align="left" prop="orgName" width="280" label="项目简称" />
        <el-table-column align="center" :label="infoDateformat[0] + '月'">
          <el-table-column align="center" prop="sameGainFeeone" label="增效奖金" />
          <el-table-column align="center" prop="gainRatioone" label="增效比例" />
          <el-table-column align="center" prop="principalone" label="负责人" />
          <el-table-column width="200" prop="schemeone" label="分配方案" align="center">
            <template #default="scope">
              <el-input
                v-if="scope.row.orgName !== '合计' && scope.row.orgName.includes('公司')"
                type="textarea"
                maxlength="300"
                @change="inputhanleChange(scope.row, 'schemeone', $event)"
                v-model="scope.row.schemeone"
              ></el-input>
              <template v-else>{{ scope.row.schemeone }}</template>
            </template>
          </el-table-column>
        </el-table-column>
        <el-table-column align="center" :label="infoDateformat[1] + '月'">
          <el-table-column align="center" prop="sameGainFeetwo" label="增效奖金" />
          <el-table-column align="center" prop="gainRatiotwo" label="增效比例" />
          <el-table-column align="center" prop="principaltwo" label="负责人" />
          <el-table-column width="200" prop="schemetwo" label="分配方案" align="center">
            <template #default="scope">
              <el-input
                v-if="scope.row.orgName !== '合计' && scope.row.orgName.includes('公司')"
                type="textarea"
                maxlength="300"
                @change="inputhanleChange(scope.row, 'schemetwo', $event)"
                v-model="scope.row.schemetwo"
              ></el-input>
              <template v-else>{{ scope.row.schemetwo }}</template>
            </template>
          </el-table-column>
        </el-table-column>
        <el-table-column align="center" :label="infoDateformat[2] + '月'">
          <el-table-column align="center" prop="sameGainFeethree" label="增效奖金" />
          <el-table-column align="center" prop="gainRatiothree" label="增效比例" />
          <el-table-column align="center" prop="principalthree" label="负责人" />
          <el-table-column width="200" prop="schemethree" label="分配方案" align="center">
            <template #default="scope">
              <el-input
                v-if="scope.row.orgName !== '合计' && scope.row.orgName.includes('公司')"
                type="textarea"
                maxlength="300"
                @change="inputhanleChange(scope.row, 'schemethree', $event)"
                v-model="scope.row.schemethree"
              ></el-input>
              <template v-else>{{ scope.row.schemethree }}</template>
            </template>
          </el-table-column>
        </el-table-column>
      </el-table>

表格中的prop字段是我处理过的  这个函数是处理输入框的数据 可以找到哪一行哪一个公司输入的数据

function inputhanleChange(row, prop, inputValue) {
    let orgId = row.orgId;
    if (!dataMap.has(orgId)) {
      dataMap.set(orgId, []);
    }
    let dataArray = dataMap.get(orgId);

    const data = {
      infoDate: '',
      orgId: orgId,
      scheme: '',
    };

    if (prop === 'schemeone') {
      data.infoDate = row.infoDateone;
      data.scheme = inputValue;
    } else if (prop === 'schemetwo') {
      data.infoDate = row.infoDatetwo;
      data.scheme = inputValue;
    } else if (prop === 'schemethree') {
      data.infoDate = row.infoDatethree;
      data.scheme = inputValue;
    }

    dataArray.push(data); // 将生成的对象推送到数组中
    dataMap.set(orgId, dataArray); // 将更新后的数组重新放入 Map 中
    console.log(dataMap);
    const objectArray = Array.from(dataMap.values()).flat();
    headvalue.value = objectArray;
  }

合并单元格的方法跟上一篇的一样 根据个人需求稍作修改