怎么使用vue2+el-table实现甘特图?

咖啡丶泡面
  • 5
新手上路,请多包涵

怎么使用vue2+el-table实现甘特图?
table数据中有开始日期和截止日期字段,1-31日都有可能。

回复
阅读 548
1 个回答
linong
  • 25.8k
✓ 已被采纳
  1. 先会做一个日历面板。(好像也不用会, 面试题:JS 获取某月的天数
  2. 学会 el-table 的 slot 规则。(不需要学合并表格)
  3. 然后根据数据做渲染即可。
tableData = ['干早饭','干晚饭','干午饭']
columns = 31;// 这里你需要和你的面板联动,获取当月的天数

然后

<el-table :data="tableData">
 <el-table-column v-for="item in columns">
   {{item}} 这里放插槽,能拿到 row 的信息,也就是干早饭还是午饭
 </el-table-column>
</el-table> 
已参与了 SegmentFault 思否社区 10 周年「问答」打卡 ,欢迎正在阅读的你也加入。
宣传栏