Vue用etable实现甘特图

<div class="table-responsive">
    <table class="table table-striped table-responsive no-padding table-hover table-bordered table-sm ofu-table-fixed"  style="text-align: center">
        <tr style="">
            <th rowspan="2" width="100" style="vertical-align:middle;width: 100px; text-align: center">合伙人</th>
            <th rowspan="2" width="100" style="vertical-align:middle;text-align: center">班组</th>
{
   {
   --            <th rowspan="2" width="100" style="vertical-align:middle;text-align: center">人数</th>--}}
            <template v-for="(val , key) in sectionDate">
                <th :colspan="val.cols" style="text-align: center">[!! val.month !!] 月份</th>
            </template>
        </tr>
        <tr>
            <template v-for="(val , key) in sectionDate">
                <template v-for="(val1 , key1) in val.days">
                    <th :bgcolor="val1.is_job">[!! val1.day !!]</th>
                </template>
            </template>
        </tr>
        <template  v-for="(item,index) in tableData">
            <td :rowspan="item.rows">[!! item.workshop_name !!]</td>
            <template v-for="(val , key) in item.list">
                <tr>
                    <td>[!! val.group_name !!]</td>
{
   {
   --                    <td>[!! val.number !!] / [!! val.rea_number !!]</td>--}}
                    <template v-for="(val1 , key1) in val.list">
                        <template v-if="val1.box">
                            <td :colspan="val1.show_days" v-on:mouseover="moveShow(val1,index,key,key1,true)" v-on:mouseout="moveShow(val1,index,key,key1,false)" :preview-src-list="srcList" class="solidBox" style="border: 1px solid #111" v-on:click="showDrawer(val1)" :bgcolor="val1.bg_color">
                                <span>[!! val1.large_no !!]款  [!! val1.place_name !!] [!! val1.total !!]件 [!! val1.up_line !!]上 [!! val1.end_day !!]下  [!! val1.per_yield !!]*[!! val1.tailor_num !!]=[!! val1.day_num !!]件  订单完成: [!! val1.percentage !!]</span>
                                <div v-if="val1.show_img">
                                    <el-image :id="val1.box_id"  style="width: 100px; height: 100px;position: absolute" :src="val1.pic_url" fit="cover"></el-image>
                                </div>
{
   {
   --                                <el-button slot="reference">[!! val1.large_no !!]款  [!! val1.place_name !!] [!! val1.total !!]件 [!! val1.up_line !!]上 [!! val1.end_day !!]下  [!! val1.per_yield !!]*[!! val1.tailor_num !!]=[!! val1.day_num !!]件  订单完成: [!! val1.percentage !!]</el-button>--}}
                            </td>
                        </template>
                        <template v-else>
                            <td :bgcolor="val1.is_job"></td>
                        </template>
                    </template>
                </tr>
            </template>
        </template>
    </table>
</div>
<el-drawer
    :title="drawerTitle"
    :visible.sync="drawer"
    direction="rtl"
    :before-close="handleClose"
    size="60%">
    <span>
        <!-- 生产爬坡期 -->
        <div class="panel panel-default" style="margin-bottom: 10px;">
            <div class="panel-body">
                <div class="table-responsive">
                    <table class="table table-striped table-responsive no-padding table-hover table-bordered table-sm ofu-table-fixed" style="margin-bottom: 0">
                        <thead class="thead-inverse">
                            <tr>
                                <th style="text-align: center">款号:[!! option.large_no !!]</th>
                                <th style="text-align: center">品名:[!! lineList.place_name !!]</th>
                                <th style="text-align: center">订单数量:[!! lineList.total  !!]</th>
                                <th style="text-align: center">车缝SMV:[!! lineList.tailor_smv  !!]</th>
                            </tr>
                            <tr>
                                <th style="text-align: center">生产班组:[!! lineList.group_name  !!]</th>
                                <th style="text-align: center">指导效率:[!! lineList.guide_rate  !!]</th>
                                <th style="text-align: center">浮动效率:[!! lineList.float_rate_str  !!]</th>
                                <th style="text-align: center">车缝效率:[!! lineList.tailor_rate  !!]</th>
                            </tr>
                            <tr>
                                <th style="text-align: center">
                                    <el-date-picker
                                        v-model="ganttForm.up_line"
                                        align="right"
                                        type="date"
                                        placeholder="上线日期"
                                        format="yyyy-MM-dd"
                                        value-format="yyyy-MM-dd"
                                        v-on:change="handleGanttChange()"
                                        style="width: 100%">
                                    </el-date-picker>
                                </th>
                                 <th style="text-align: center">
                                人数:
                                <el-input-number min="0" :max="50" size="mini" v-model="ganttForm.number" controls-position='right' v-on:change="handleGanttChange()" placeholder="人数调整" type="number"></el-input-number>
                                <button v-on:click="ganttOpen(1)" v-if="ganttForm.number == 0">启用</button>
                            </th>
                            <th style="text-align: center">
                                时间:
                                <el-input-number step="30"  min="0" size="mini" :max="500" v-model="ganttForm.hours" controls-position='right' v-on:change="handleGanttChange()" placeholder="时间调整" type="number"></el-input-number>
                                <button v-on:click="ganttOpen(2)" v-if="ganttForm.hours == 0">启用</button>
                            </th>
                            <th style="text-align: center"