AngularJS使用ng-repeat-start/end实现表格双行动态rowspan方案咨询

效果参考 #

1. 数据对象格式定义 #

// 控制器中定义表格数据源
$scope.tableData = [
  {
    ruleName: "Rule 1",
    // 每个规则下对应的配置行数据
    configValues: [
      { id: 1, fields: { "带宽阈值": "100M", "响应超时": "5s" } }
    ]
  },
  {
    ruleName: "Rule 2",
    configValues: [
      { id: 2, fields: { "带宽阈值": "200M", "响应超时": "3s" } },
      { id: 3, fields: { "带宽阈值": "50M", "响应超时": "10s" } }
    ]
  }
];
// 表头配置数组，动态新增列直接操作该数组即可
$scope.headers = ["带宽阈值", "响应超时"];

2. HTML 渲染代码 #

<table border="1" cellpadding="6" cellspacing="0" style="width: 100%;">
  <thead>
    <tr>
      <th>规则名称</th>
      <th ng-repeat="header in headers">{{header}}</th>
      <th><button ng-click="addConfigField()">新增配置</button></th>
    </tr>
  </thead>
  <tbody>
    <!-- 规则分组首行，用ng-repeat-start开启分段重复 -->
    <tr ng-repeat-start="group in tableData">
      <!-- 规则名称列动态绑定跨行数，和当前分组下的行数同步 -->
      <td rowspan="{{group.configValues.length}}">{{group.ruleName}}</td>
      <td ng-repeat="header in headers">{{group.configValues[0].fields[header]}}</td>
      <td rowspan="{{group.configValues.length}}">
        <button>编辑</button>
      </td>
    </tr>
    <!-- 规则分组剩余行，ng-repeat-end标记分段重复结束 -->
    <tr ng-repeat-end ng-repeat="item in group.configValues.slice(1)">
      <td ng-repeat="header in headers">{{item.fields[header]}}</td>
    </tr>
  </tbody>
</table>

3. 新增配置列交互逻辑 #

$scope.addConfigField = function() {
  // 生成新字段名
  const newField = `配置项${$scope.headers.length + 1}`;
  // 表头新增列
  $scope.headers.push(newField);
  // 给所有行新增对应字段，默认值可根据业务自定义
  $scope.tableData.forEach(group => {
    group.configValues.forEach(row => {
      row.fields[newField] = "未配置";
    });
  });
};

核心逻辑说明 #

• ng-repeat-start 和 ng-repeat-end 是AngularJS提供的分段重复指令，用来处理需要重复多个相邻DOM元素的场景，刚好匹配跨行表格的分组渲染需求
• 规则列的rowspan属性和当前分组的configValues长度动态绑定，分组下新增/删除行时会自动更新跨行数，无需手动修改DOM
• 新增配置列时同时更新表头数组和所有行的fields属性，即可实现全表列同步新增，逻辑简单易维护

内容的提问来源于stack exchange，提问作者Sirisha Singampalli