一、思路步骤:
<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": "成功标准" } ] } ] } ] 三、方法datafilter方法对后台数据进行转化成一个数组装所有的内容对象;
getallRow方法得到表格总共有多少行;
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]} },
博主,暂时没有想到更好的方法进行跨行跨列动态表格的生成,若有大家更好的建议,欢迎大家留言~