vue 多层表格嵌套
**
vue 多层表格嵌套
**
后台数据 `在这里插入代码片var table1 = [
{
id: 1,
name: "加强组织领导夯实基础工作",
sore: "18分",
children: [
{
id: 11,
name: "创建氛围",
sore: "9分",
children: []
},
{
id: 11,
name: "创建氛围",
sore: "9分",
children: [
{
id: "111",
name:
"党组（党委）重视文明创建工作，定期研究有关工作，解决实际问题。2分",
sore: "2.0",
timeout: "超时上报加分",
pinlv: "共2次\n1次/每半年",
req: "会议记录（纪要）等照片",
date: "2019-01-01 -- 2019-12-31",
source: "省直文明办",
complete: "100%",
audit: "审核评分",
option: [
{
id: "1111",
name: "上报任务",
data: {
id: "9900",
orgid: "88",
uni: "1"
}
},
{
id: "1112",
name: "关联任务",
data: {
id: "9901",
orgid: "881",
uni: "2"
}
}
]
},
{
id: "112",
name:
"单位召开文明创建动员会或在全体职工中部署文明创建工作。 3分",
sore: "3.0",
timeout: "超时上报加分",
pinlv: "共2次\n2次/每半年",
req: "会议现场照片、相关材料",
date: "2020-01-01 -- 2020-12-31",
source: "省直文明办",
complete: "99%",
audit: "审核评分",
option: [
{
id: "1121",
name: "上报任务",
data: {
id: "9920",
orgid: "81",
uni: "3"
}
}
]
}
]
},
{
id: 13,
name: "其他工作",
sore: "7分"
}
]
},
{
id: 1,
name: "加强组织领导夯实基础工作",
sore: "18分",
children: [
{
id: 11,
name: "创建氛围",
sore: "9分",
children: [
{
id: "111",
name:
"党组（党委）重视文明创建工作，定期研究有关工作，解决实际问题。2分",
sore: "2.0",
timeout: "超时上报加分",
pinlv: "共2次\n1次/每半年",
req: "会议记录（纪要）等照片",
date: "2019-01-01 -- 2019-12-31",
source: "省直文明办",
complete: "100%",
audit: "审核评分",
option: [
{
id: "1111",
name: "上报任务",
data: {
id: "9900",
orgid: "88",
uni: "1"
}
},
{
id: "1112",
name: "关联任务",
data: {
id: "9901",
orgid: "881",
uni: "2"
}
}
]
},
{
id: "112",
name:
"单位召开文明创建动员会或在全体职工中部署文明创建工作。 3分",
sore: "3.0",
timeout: "超时上报加分",
pinlv: "共2次\n2次/每半年",
req: "会议现场照片、相关材料",
date: "2020-01-01 -- 2020-12-31",
source: "省直文明办",
complete: "99%",
audit: "审核评分",
option: [
{
id: "1121",
name: "上报任务",
data: {
id: "9920",
orgid: "81",
uni: "3"
}
}
]
}
]
},
{
id: 12,
name: "基础工作",
sore: "8分"
},
{
id: 13,
name: "其他工作",
sore: "7分"
}
]
}
];`
htnl代码在这里插入代码片
一级指标
分值
二级指标
分值
目标任务
任务分值
超时处理
上报频率
上报资料要求
上报时限
任务来源
完成进度
审核评分
操作
{{ item.name }}
添加一行
{{ item.sore }}
{{ par.name }}
添加一行
{{ par.sore }}
{{ val.name }}
添加一行
{{ val.sore }}
{{ val.timeout }}
{{ val.pinlv }}
{{ val.req }}
{{ val.date }}
{{ val.source }}
{{ val.complete }}
{{ val.audit }}
{{ val.audit }}
保存
methods: {
// 添加一级嵌套数组
addrow(i) {
// 定义一个对象
let obj = {}
// obj.name = "";
// obj.sore = "";
obj.children = []
// 把obj对象插入table1数组中
this.table1.splice(i + 1, 0, obj)
// 再定义一个对象
let arr1 = {}
// arr1.name = "";
// arr1.sore = "";
arr1.children = []
// 把arr1对象插入obj的子数组中，形成2级嵌套数组
obj.children.splice(1, 0, arr1)
// 再次定义一个对象
let arr2 = {}
// arr2.name = "";
// arr2.sore = "";
// arr2.timeout = "";
// 把arr2对象插入arr1对象子数组中，形成3级嵌套数组
arr1.children.splice(1, 0, arr2)
},
addrow2(n) {
let obj = {}
let i = n.split('-')[0]
let j = n.split('-')[1]
// obj.name = "";
// obj.sore = "";
obj.children = []
let arr1 = {}
// arr1.name = "";
// arr1.sore = "";
arr1.children = []
obj.children.splice(1, 0, arr1)
this.table1[i].children.splice(j + 1, 0, obj)
},
addrow3(m) {
let obj = {}
let i = m.split('-')[0]
let j = m.split('-')[1]
let p = m.split('-')[2]
// obj.name = "";
// obj.sore = "";
this.table1[i].children[j].children.splice(p + 1, 0, obj)
},
getTableContent() {
let mytable = document.getElementsByTagName('table')[0]
// let mytable2 = document.getElementsByClassName('table2')
console.log(mytable)
// let data = []
// let data2 = []
// for (let i = 1; i < mytable.rows.length; i++) {
// console.log(mytable.rows[i])
// for (let j = 0; j < mytable.rows[i].cells.length; j++) {
// if (!data[i]) {
// data[i] = new Array()
// }
// data[i][j] = mytable.rows[i].cells[j].textContent
// }
// }
// console.log(data)
// for (let i=0;i
// for (let j=0;j
// if (!data2[i]){
// data2[i]=new Array();
// }
// data2[i][j]=mytable2.rows[i].cells[j].textContent;
// }
// console.log(data2)
// }
}
}
}
css代码`
#table1 {
min-width: 1000px;
border-collapse: collapse;
text-align: center;
}
table th,
td {
border: 1px solid #999;
padding: 0;
}
.table2 {
/border-collapse: collapse;/
border-collapse: collapse;
border-width: 0px;
border-style: hidden
}
.table2 tr td:nth-child(1) {
border-left: 0;
}
.table2 tr td:nth-last-child(1) {
border-right: 0;
}
.table2 tr:nth-child(1) td {
border-top: 0;
}
.table2 tr:nth-last-child(1) td {
border-bottom: 1px solid #999;
}
.table3 {
/border-collapse: collapse;/
border-collapse: collapse;
border-width: 0px;
border-style: hidden
}
.w200 {
width: 98.5px;
}
.save {
margin-left: 1320px;
margin-top: 10px;
}
`