table 动态合并_html5 table 动态数据合并-CSDN博客

博客给出了Vue的相关例子，但未详细说明例子内容。Vue是前端开发中常用的框架，这些例子可能与Vue的功能、应用等方面相关。
例子1：
在这里插入图片描述
例子2：

> 例子1：

list: [
        {
          sx: '学生【敏捷】',
          spanNum: 3,
          wdList: [
            {
              wd: '学生法术伤害',
              fz: '10',
              pjckList: [
                {
                  pjck: '学生法术伤害评分标准提示B',
                  bzfz: '10',
                  dj: 'B'
                },
                {
                  pjck: '学生法术伤害评分标准提示C',
                  bzfz: '5',
                  dj: 'C'
                }
              ]
            },
            {
              wd: '学生物理伤害',
              fz: '12',
              pjckList: [
                {
                  pjck: '学生物理伤害评分标准提示',
                  bzfz: '10',
                  dj: 'D'
                }
              ]
            }
          ]
        }
      ],

 <table style="margin-top:10px">
        <tr>
          <th>属性</th>
          <th>维度</th>
          <th>分值</th>
          <th>评价参考</th>
          <th>标准分值</th>
          <th>对应等级</th>
        </tr>
        <template v-for="(item, index) in list">
          <tr :key="index">
            <td :rowspan="item.spanNum">{{item.sx}}</td>
            <td :rowspan="item.wdList.length">{{item.wdList[index].wd}}</td>
            <td :rowspan="item.wdList.length">{{item.wdList[index].fz}}</td>
            <td>{{item.wdList[index].pjckList[index].pjck}}</td>
            <td>{{item.wdList[index].pjckList[index].bzfz}}</td>
            <td>{{item.wdList[index].pjckList[index].dj}}</td>
          </tr>
          <tr v-for="(wd, wdIndex) in item.wdList.length-1" :key="wdIndex">
            <td>{{item.wdList[wdIndex].pjckList[wd].pjck}}</td>
            <td>{{item.wdList[wdIndex].pjckList[wd].bzfz}}</td>
            <td>{{item.wdList[wdIndex].pjckList[wd].dj}}</td>
          </tr>
          <template v-for="(pjck, pjckIndex) in item.wdList[index].pjckList.length - 1">
            <tr :key="pjckIndex">
              <td>{{item.wdList[pjck].wd}}</td>
              <td>{{item.wdList[pjck].fz}}</td>
              <td>{{item.wdList[pjck].pjckList[pjckIndex].pjck}}</td>
              <td>{{item.wdList[pjck].pjckList[pjckIndex].bzfz}}</td>
              <td>{{item.wdList[pjck].pjckList[pjckIndex].dj}}</td>
            </tr>
          </template>
        </template>
      </table>



> 例子2：
<table style="margin-top:10px" border class="classEvalClass_table">
            <tr style="background:#F6F6F6">
              <td style="width:20vw">评价指标</td>
              <td style="width:20vw">维度</td>
              <td style="width:20vw">分值</td>
              <td style="width:20vw"></td>
            </tr>
            <template v-for="(item, index) in dimenList">
              <tr :key="index+'p'">
                <td style="width:20vw" :rowspan="item.dimenList.length">{{item.prop}}</td>
                <td style="width:20vw">{{item.dimenList[0].dimen}}</td>
                <td style="width:20vw">{{item.dimenList[0].pf}}</td>
                <td style="width:20vw;color:#FF8D1A">详情</td>
              </tr>
              <tr v-for="(wd, wdIndex) in item.dimenList.length-1" :key="wdIndex+'w'">
                <td style="width:20vw">{{item.dimenList[wd].dimen}}</td>
                <td style="width:20vw">{{item.dimenList[wd].pf}}</td>
                <td style="width:20vw;color:#FF8D1A">详情</td>
              </tr>
            </template>
            <template>
              <tr>
                <td
                  style="width:50vw;background:#FF8D1A;color:white;font-weight:bold"
                  :colspan="2"
                >总分</td>
                <td style="width:20vw;background:#FFC300;color:white">98</td>
                <td style="width:20vw;background:#FFC300;color:white"></td>
              </tr>
            </template>
          </table>
/* 表格 */
.classEvalClass_table {
  border-spacing: 0px;
  border-collapse: collapse;
  width: 100%;
  border: 1px solid #c6c6c6;
}
.classEvalClass_table td {
  padding: 5px;
}