vue 多层表格嵌套

本文介绍如何在Vue中实现多层表格嵌套。通过示例后台数据、HTML、CSS代码展示具体实现方法,包括表格样式设置和数据结构处理。
摘要由CSDN通过智能技术生成

**

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: {
            
  • 0
    点赞
  • 3
    收藏
    觉得还不错? 一键收藏
  • 3
    评论
评论 3
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值