js操作数据的问题

Question

原数据

 tableData: [
        {
          name: "zhu1",
          room: "RC",
          hostList: [
            {
              start: 1,
              end: 3,
              histId: 'aa1',
              statu: 0
            },
            {
              start: 7,
              end: 8,
              histId: 'aa5',
              statu: 0
            },
            {
              start: null,
              end: null,
              histId: 'aa30',
              statu: 1
            }
          ]
        },
        {
          name: "zhu2",
          room: "RC22",
          hostList: [
            {
              start: 1,
              end: 2,
              histId: 'bb1',
              statu: 1
            },
            {
              start: 5,
              end: 7,
              histId: 'bb3',
              statu: 0
            },
            {
              start: 9,
              end: 10,
              histId: 'bb7',
              statu: 0
            }
          ]
        }
      ],

期望的数据：

 tableData: [
        {
          name: "zhu1",
          room: "RC",
          hostList: [
          //1-3
            {
              histId: 'aa1',
              statu: 0
            },
             {
              histId: 'aa1',
              statu: 0
            },
             {
              histId: 'aa1',
              statu: 0
            },
            //4-6
             {
              histId: null,
              statu: null
            },
            {
              histId: null,
              statu: null
            },
            {
              histId: null,
              statu: null
            },
            //7-8
            {
              histId: 'aa5',
              statu: 0
            },
              {
              histId: 'aa5',
              statu: 0
            },
            //9-10
            {
              histId: null,
              statu: null
            },
            {
              histId: null,
              statu: null
            },
          ]
        },
        {
          name: "zhu2",
          room: "RC22",
          hostList: [
          //1-2
            {
              histId: 'bb1',
              statu: 1
            },
            {
              histId: 'bb1',
              statu: 1
            },
            //3-4
             {
              histId: null,
              statu: null
            },
             {
              histId: null,
              statu: null
            },
            //5-7
            {
              histId: 'bb3',
              statu: 0
            },
             {
              histId: 'bb3',
              statu: 0
            },
             {
              histId: 'bb3',
              statu: 0
            },
            //8
             {
              histId: null,
              statu: null
            },
            //9-10
            {
              histId: 'bb7',
              statu: 0
            },
             {
              histId: 'bb7',
              statu: 0
            }
          ]
        }
      ],

背景：

这种格子，里面有一些数据， 如果hostList:里面的start是26,end27，那这个竖格子的第26-27行高亮；数据返回不定，格子数量确定；
我的思路是上述的操作数据去展示，如果有其他更好的思路！！！请告诉我！vue项目！

Answer 1

主要就是判断 至于26 27你就可以v-for得时候 来动态加class
我只是按照你得数据来的 有其他得判断依然可以加

那么简单的方法 tableData里面map定义一个新数组
this.tableData.map((item)=>{

item.newList=[]

return item;

})
这样和hostList同级一个数组 就不需要判断了 直接this.tableData[i].newList.push(item)
你就不用定义list 直接用tableData