Javascript 我尝试使用Vue.js创建简单的甘特图（表）
我尝试创建一个简单的甘特图（表格）： 我使用computed属性newTasks（）模拟从Vuex存储异步获取任务列表，但我的解决方案不起作用。 你能帮帮我吗 具有计算属性的非工作解决方案：Javascript 我尝试使用Vue.js创建简单的甘特图（表）,javascript,vue.js,Javascript,Vue.js,我尝试创建一个简单的甘特图（表格）： 我使用computed属性newTasks（）模拟从Vuex存储异步获取任务列表，但我的解决方案不起作用。 你能帮帮我吗 具有计算属性的非工作解决方案： newvue({ el:“应用程序”， 数据：{ longMode:false， 栏目：7， 任务：空 }, 观察：{ 新任务（val）{ this.tasks=val； 这是.$forceUpdate（）； } }, 创建（）{ 这个.$nextTick（（）=>{ this.tasks=this.ne
newvue({
el:“应用程序”，
数据：{
longMode:false，
栏目：7，
任务：空
},
观察：{
新任务（val）{
this.tasks=val；
这是.$forceUpdate（）；
}
},
创建（）{
这个.$nextTick（（）=>{
this.tasks=this.newTasks；
这是.$forceUpdate（）；
})
},
计算：{
newTasks（）{
让tasks=null；
console.log（“newTasks----------------”）；
const self=这个；
设置超时（（）=>{
if（self.longMode）{
任务=[{
起点：0，
完:3
},
{
起点：2，
完:9
},
{
开始时间：7点，
完:13
}
];
}否则{
任务=[{
起点：0，
完:4
},
{
起点：2，
完:6
}
];
}
log（“返回新任务：”）；
console.log（任务）；
返回任务；
}, 2000);
}
},
方法：{
切换（）{
this.longMode=！this.longMode；
this.columns=this.longMode？14:7；
this.tasks=this.newTasks；
log（“单击！longMode:+this.longMode”）；
},
getLineStyle（索引）{
设rowIndex=2；
log（“getLineStyle（“+rowIndex+”））；
console.log（这是$refs）；
if（this.tasks&&this.tasks.length>0）{
console.log（this.tasks）；
让task=this.tasks[rowIndex]；
console.log（任务）；
让start=task.start；
让end=task.end；
让startRef='cell'+start；
设endRef='单元格'+结束；
设startedleft=this.$refs[startRef][0]。offsetLeft；
设endLeft=this.$refs[endRef][0].offsetLeft；
让taskWidth=（endLeft-startedeft）+'px'；
让styleObject={
左图：惊吓，
宽度：任务宽度
};
返回样式对象；
}
}
}
})正文{
背景：#20262E；
填充：20px；
字体系列：Helvetica；
}
#应用程序{
背景：#fff；
边界半径：4px；
填充：20px；
过渡：均为0.2s；
}
桌子{
边界塌陷：塌陷；
表格布局：自动；
/*固定的*/
边框：1px实心#012656；
}
.细胞{
填充物：5px；
边框：1px实心#012656；
光标：指针；
}
td.单元：第n个子单元（7n-1），
td.单元：第n个子单元（7n）{
背景：#eee；
}
.线路{
位置：绝对位置；
顶部：4px；
高度：6px；
边界半径：3px；
背景：红色；
溢出：隐藏；
}
{{colIndex+1}}
tasksnull