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

Question

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

Answer 1

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 周年「问答」打卡 ，欢迎正在阅读的你也加入。