vue跨行跨列动态表格生成
2024-10-20 08:37:59
一、思路步骤:
- 根据后台传输的数据进行格式转化;
- 索引为多少的时候进行跨行;
<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]}
},
博主,暂时没有想到更好的方法进行跨行跨列动态表格的生成,若有大家更好的建议,欢迎大家留言~
最新文章
- 【转载】Java集合类Array、List、Map区别和联系
- 【Beta】Daily Scrum Meeting第四次
- sqlalchemy mark-deleted 和 python 多继承下的方法解析顺序 MRO
- OpenCV2+入门系列(四):计算图像的直方图,平均灰度,灰度方差
- 【Alpha版本】冲刺阶段——Day 4
- 2013长沙邀请赛A So Easy!(矩阵快速幂,共轭)
- ExtJs 使用点滴 十四 通过设置CheckboxSelectionModel属性值来实现GridPanel复选框可用不可用
- Interpreter
- 【转】larbin中的url去重算法
- kafka集群安装与配置
- Winform中修改WebBrowser控件User-Agent的方法(已经测试成功)
- Effective C++(16) 成对使用new和delete时要采取相同的形式
- css3动画-animation
- 【java】异常
- 【第二篇】SAP ABAP7.5x新语法之OPEN SQL
- 16 级高代 II 思考题九的七种解法
- SDN2017 第三次实验作业
- Django之模板语法
- css-position属性实例2
- [leetcode]Remove Duplicates from Sorted List @ Python
热门文章
- python之路43 JavaScript语法BOM与DOM jQuery对比 标签绑定事件
- Miller-Rabin 与 Pollard-Rho 算法学习笔记
- Winform DataGridViewTextBoxCell 编辑添加右键菜单,编辑选中文本
- 【力扣】剑指 Offer II 092. 翻转字符
- 基于 VScode 搭建 STM32 运行环境
- youtube-dl下载太慢了,我选yt-dlp
- 商城网站商品sku选择的js简易实现
- odoo中的字段创建后,不可以编辑
- 集合框架-Collection集合
- 【分析笔记】展讯 RDA8810PL 平台 Camera 驱动分析和移植(Android 4.4 )