vue+js实现动态计算勾选顺序，并且指定不同分组不同计算逻辑

首先是效果图


vue代码

<el-table :data="atlasDataList" style="width: 100%" :span-method="spanMethod" border>
              <el-table-column prop="stationName" label="" width="180" />
              <el-table-column prop="atlasNumber" label="" width="180" />
              <el-table-column label="图册名称" width="180">
                <template #default="{ row }">
                  <el-checkbox v-model="row.checked" :label="row.atlasName" @change="handleCheckboxChange(row)" />
                </template>
              </el-table-column>
              <el-table-column prop="atlasFigureNumber" label="图号(图册)" width="180">
                <template #default="{ row }">
                  <span v-if="row.checked">{{row.atlasNumber + '-' + row.atlasFigureNumber}}</span>
                  <span v-else></span>
                </template>
              </el-table-column>
            </el-table>

js代码（合并行的方法见上一篇文章）

<script setup>

const atlasDataList = ref(
[
    {
        "stationName": "车站1",
        "atlasNumber": "大瑞施号1",
        "atlasName": "计算机联锁图册",
        "checked": true,
        "atlasFigureNumber": "Ⅰ"
    },
    {
        "stationName": "车站1",
        "atlasNumber": "大瑞施号1",
        "atlasName": "区间自动闭塞图册",
        "checked": true,
        "atlasFigureNumber": "Ⅱ"
    },
    {
        "stationName": "车站1",
        "atlasNumber": "大瑞施号1",
        "atlasName": "信号集中监测图册"
    },
    {
        "stationName": "车站1",
        "atlasNumber": "大瑞施号1",
        "atlasName": "列车运行控制系统图册",
        "checked": true,
        "atlasFigureNumber": "Ⅲ"
    },
    {
        "stationName": "车站2",
        "atlasNumber": "大瑞施号2",
        "atlasName": "计算机联锁图册",
        "checked": true,
        "atlasFigureNumber": "Ⅰ"
    },
    {
        "stationName": "车站2",
        "atlasNumber": "大瑞施号2",
        "atlasName": "区间自动闭塞图册"
    },
    {
        "stationName": "车站2",
        "atlasNumber": "大瑞施号2",
        "atlasName": "信号集中监测图册",
        "checked": false,
        "atlasFigureNumber": "Ⅱ"
    },
    {
        "stationName": "车站2",
        "atlasNumber": "大瑞施号2",
        "atlasName": "列车运行控制系统图册",
        "checked": true,
        "atlasFigureNumber": "Ⅱ"
    }
]);
  
  //选中图册名称的方法
    function handleCheckboxChange(row) {
      // 获取当前行的位置索引
      const rowIndex = atlasDataList.value.indexOf(row);

      // 计算当前行所在的分组索引
      const groupIndex = Math.floor(rowIndex / atlasTypeList.value.length);

      // 获取当前分组的所有行
      const groupRows = atlasDataList.value.slice(groupIndex * atlasTypeList.value.length, (groupIndex + 1) * atlasTypeList.value.length);

      // 获取当前分组内勾选的行
      const checkedGroupRows = groupRows.filter(item => item.checked);

      // 遍历勾选的行，设置图号(图册)属性
      checkedGroupRows.forEach((checkedRow, index) => {
        checkedRow.atlasFigureNumber = convertToRomanNumeral(index + 1);
      });
    }

    //将数字转换为罗马数字
    function convertToRomanNumeral(number) {
      const romanNumerals = [
        { value: 10, numeral: 'Ⅹ' },
        { value: 9, numeral: 'Ⅸ' },
        { value: 8, numeral: 'Ⅷ' },
        { value: 7, numeral: 'Ⅶ' },
        { value: 6, numeral: 'Ⅵ' },
        { value: 5, numeral: 'Ⅴ' },
        { value: 4, numeral: 'Ⅳ' },
        { value: 3, numeral: 'Ⅲ' },
        { value: 2, numeral: 'Ⅱ' },
        { value: 1, numeral: 'Ⅰ' }
      ];

      let result = '';
      for (const numeral of romanNumerals) {
        while (number >= numeral.value) {
          result += numeral.numeral;
          number -= numeral.value;
        }
      }
      return result;
    }
</script>