element中的table组件自带合并行的功能，它是通过给 table 传入span-method方法可以实现合并行或列。但是某些情况只需要分行显示，并不想分割数据，因此组件自带的合并行功能并不能满足需求。本文通过修改样式达到需求，许多框架都可以采用这种方式，这里以elementPlus框架举例：
首先导入elementplus的table组件，然后给需要分行的列加一个“mycell”的类名，将需要分行的数据提前处理好，或者在行内处理。

<template>
  <div class="EvalSimEvaluateCard">
    <div class="container">
      <el-table
        :data="tableData"
        border
        class="table eleChange"
        ref="multipleTable"
        header-cell-class-name="table-header"
      >
        <el-table-column prop="evaluateName" label="参数名称" width="180"></el-table-column>
        <el-table-column label="参数键" class-name="myCell"  width="100">
          <!-- 分行显示 -->
          <template #default="scope">
            <div
              class="myCellDiv"
              v-for="(item, index) in scope.row.evaluateKeys.split(';')"
              :key="index"
            >
              {{ item }}
            </div>
          </template>
        </el-table-column>
        <el-table-column label="参数标签" class-name="myCell" width="230">
          <!-- 分行显示 -->
          <template #default="scope">
            <div
              class="myCellDiv"
              v-for="(item, index) in scope.row.evaluateLabels.split(';')"
              :key="index"
            >
              {{ item }}
            </div>
          </template>
        </el-table-column>
        <el-table-column label="参数值" class-name="myCell" width="100">
          <!-- 分行显示 -->
          <template #default="scope">
            <div
              class="myCellDiv"
              v-for="(item, index) in scope.row.evaluateValues.split(';')"
              :key="index"
            >
              {{ item }}
            </div>
          </template>
        </el-table-column>
        <el-table-column label="操作" min-width="230">
          <template #default="scope">
            <el-button
              type="primary"
              text
              icon="Edit"
              @click="handleEdit(scope.$index, scope.row)"
              >编辑</el-button
            >
            <el-button
              type="primary"
              text
              icon="Delete"
              @click="handleDelete(scope.$index, scope.row)"
              >删除</el-button
            >
          </template>
        </el-table-column>
      </el-table>
    </div>
  </div>
</template>

export default {
  name: "simParams",
  data() {
    return {
      tableData: [
        {
            "evaluateId": 1,
            "evaluateName": "无人机的效能评估",
            "evaluateKeys": "ck;cm;cv;m;ed;ew;eh;eo",
            "evaluateLabels": "障碍物采购单价;导弹价格;投掷系统单价;发射车最大携弹量;敌方被击毁损失的钱;敌方被严重损伤损失的钱;敌方被轻微损伤的钱;敌方无影响损失的钱",
            "evaluateValues": "1;1;1;1;1;1;1;1"
        },
        {
            "evaluateId": 2,
            "evaluateName": "参数1",
            "evaluateKeys": "a",
            "evaluateLabels": "A",
            "evaluateValues": "1"
        },
        {
            "evaluateId": 3,
            "evaluateName": "参数2",
            "evaluateKeys": "B",
            "evaluateLabels": "b",
            "evaluateValues": "2"
        }
      ],
    };
  },
};

此处是对表格的单元格样式处理，这里先取消全部的padding，再根据根据实际情况自己设置一个padding。再为加入的div设置边框，最后一个div标签的底边框取消，要不然会重复。

.myCell:not(.table-header),.myCell:not(.table-header) .cell{
  padding: unset!important;
}
.myCell .myCellDiv{
  border-bottom: 1px solid #ebeef5;
  padding: 2px 12px;
}
.myCell .cell .myCellDiv:last-child{
  border-bottom: unset;
}

效果图：