iview Tab表格里面把时间轴里面的时间段，用开始-结束时间，阴影显示在Tab上

                <div class="timeBox" ref="timeBox">
                    <!-- 标题文字 -->
                    <div class="timeRange" :title="item" :style="{left:countLeftValue(item).left, width: countLeftValue(item).width}" v-for="(item,index) in row.timeAxis" :value="item.value" :key="index">
                    </div>
                </div>
            </template>      
        </Table>
        <div style="margin: 10px;overflow: hidden">
            <div style="float: right;">
                <Page :total="dataCount" :page-size="pageSize" show-total  @on-change="changepage"></Page>
            </div>
        </div>
    </div>

**方法二**


列子：


beginTime:"00:00:00",


endTime:"11:59:59",


如果返回的一个开始时间和结束时间，并且以这个为时间轴的起点  和重点位置；


这时，需要重新计算每行的 总时间：totalTime


let new\_endTime = endTime.split('-')[0].split(':')[0] \*60 \* 60 + endTime.split('-')[0].split(':')[1] \*60 + Number(endTime.split('-')[0].split(':')[2]); // 秒


let new\_beginTime = beginTime.split('-')[0].split(':')[0] \*60 \* 60 + beginTime.split('-')[0].split(':')[1] \*60 + Number(beginTime.split('-')[0].split(':')[2]); // 秒


let totalTime = (new\_endTime - new\_beginTime);



**小心有坑：**


left 的值会变化；如果起始时间 从0点0分0秒 开始是正常的，否则有bug；


let left = (start\_Time / totalTime) \*100;


let width =( (end\_Time - start\_Time) / totalTime)\*100 + '%';



if( left >100 ){


left = (left - 100 )+ '%'


}else{


left = left + '%'


}


详细代码如下：