一、思路步骤:

  1. 根据后台传输的数据进行格式转化;
  2. 索引为多少的时候进行跨行;
        <table id="table">
<thead>
<tr>
<th class="field">领域</th>
<th class="task">任务目标</th>
<th class="shorttask">短期目标</th>
<th class="standard">成功标准</th>
<th class="remask">教学情景</th>
<th class="remask">开始时间</th>
<th class="remask">结束时间</th>
</tr>
</thead>
<tbody>
<tr v-for="(item,index) in datafilter(fieldlist) " :key="index">
<td v-if="getfieldRow(index).flag" :rowspan="getfieldRow(index).value">{{ item.field }}</td>
<td v-if="gettaskRow(index).flag" :rowspan="gettaskRow(index).value">{{ item.task }}</td>
<td>{{ item.shortgoal_item }}</td>
<td>{{ item.standard }}</td>
<td v-if="getfieldRow(index).flag" :rowspan="getfieldRow(index).value">单训课、家庭康复指导</td>
<td></td>
<td></td>
</tr>
</tbody>
</table>

二、后台json数据格式:

"fieldlist": [
            {
                "field": "A领域",
                "tasklist": [
                    {
                        "task": "任务目标A1",
                        "shortgoal": [
                            {
                                "shortgoal_item": "短期目标1",
                                "standard": "成功标准"
                            },
                            {
                                "shortgoal_item": "短期目标2",
                                "standard": "成功标准"
                            }
                        ]
                    },
                      {
                        "task": "任务目标A2",
                        "shortgoal": [
                            {
                                "shortgoal_item": "短期目标1",
                                "standard": "成功标准"
                            },
                            {
                                "shortgoal_item": "短期目标2",
                                "standard": "成功标准"
                            },
                              {
                                "shortgoal_item": "短期目标3",
                                "standard": "成功标准"
                            }
                        ]
                    }
                ]
            }
      
        ]
三、方法
  1. datafilter方法对后台数据进行转化成一个数组装所有的内容对象;
  2. getallRow方法得到表格总共有多少行;
  3. gettaskRow、getfieldRow方法进行计算某一列中的哪一行需要跨行(rowspan)
    datafilter(fieldlist) {
let arr = []
for (let item of fieldlist) {
for (let i of item.tasklist) {
for (let j of i.shortgoal) {
arr.push({
field: item.field,
task: i.task,
shortgoal_item: j.shortgoal_item,
standard: j.standard
})
}
} }
console.log(arr)
console.log(arr.length)
return arr
},
getallRow() { let allnumbers = 0
for (let item of this.fieldlist) {
for (let i of item.tasklist) {
allnumbers = allnumbers + i.shortgoal.length
}
}
return allnumbers
},
gettaskRow(inx) {
let index = 0
let dict = {}
let dictfliter = {}
for (let item of this.fieldlist) {
for (let i = -1; i < item.tasklist.length - 1; i++) {
index = index + item.tasklist[i + 1].shortgoal.length
dict[index] = item.tasklist[i + 1].shortgoal.length
}
}
for (let item = 0; item < Object.keys(dict).length; item++) {
if (item == 0) {
dictfliter["0"] = Number(Object.keys(dict)[item])
dictfliter[Object.keys(dict)[item]] = Object.values(dict)[item + 1]
} else {
dictfliter[Object.keys(dict)[item]] = Object.values(dict)[item + 1]
}
}
// console.log(dictfliter)
return {flag: dictfliter.hasOwnProperty(inx), value: dictfliter[inx]}
},
getfieldRow(inx) {
let count = 0
let dict = {}
for (let item of this.fieldlist) {
let index = 0
for (let i of item.tasklist) {
index = index + i.shortgoal.length //计算某个领域对应的所有短期目标的条目
}
dict[count] = index
count = count + index
}
// console.log(dict)
return {flag: dict.hasOwnProperty(inx), value: dict[inx]}
},

博主,暂时没有想到更好的方法进行跨行跨列动态表格的生成,若有大家更好的建议,欢迎大家留言~

最新文章

  1. 【转载】Java集合类Array、List、Map区别和联系
  2. 【Beta】Daily Scrum Meeting第四次
  3. sqlalchemy mark-deleted 和 python 多继承下的方法解析顺序 MRO
  4. OpenCV2+入门系列(四):计算图像的直方图,平均灰度,灰度方差
  5. 【Alpha版本】冲刺阶段——Day 4
  6. 2013长沙邀请赛A So Easy!(矩阵快速幂,共轭)
  7. ExtJs 使用点滴 十四 通过设置CheckboxSelectionModel属性值来实现GridPanel复选框可用不可用
  8. Interpreter
  9. 【转】larbin中的url去重算法
  10. kafka集群安装与配置
  11. Winform中修改WebBrowser控件User-Agent的方法(已经测试成功)
  12. Effective C++(16) 成对使用new和delete时要采取相同的形式
  13. css3动画-animation
  14. 【java】异常
  15. 【第二篇】SAP ABAP7.5x新语法之OPEN SQL
  16. 16 级高代 II 思考题九的七种解法
  17. SDN2017 第三次实验作业
  18. Django之模板语法
  19. css-position属性实例2
  20. [leetcode]Remove Duplicates from Sorted List @ Python

热门文章

  1. python之路43 JavaScript语法BOM与DOM jQuery对比 标签绑定事件
  2. Miller-Rabin 与 Pollard-Rho 算法学习笔记
  3. Winform DataGridViewTextBoxCell 编辑添加右键菜单,编辑选中文本
  4. 【力扣】剑指 Offer II 092. 翻转字符
  5. 基于 VScode 搭建 STM32 运行环境
  6. youtube-dl下载太慢了,我选yt-dlp
  7. 商城网站商品sku选择的js简易实现
  8. odoo中的字段创建后,不可以编辑
  9. 集合框架-Collection集合
  10. 【分析笔记】展讯 RDA8810PL 平台 Camera 驱动分析和移植(Android 4.4 )