js原生table渲染

最新推荐文章于 2025-05-09 00:56:02 发布

原创最新推荐文章于 2025-05-09 00:56:02 发布 · 740 阅读

本内容遵循CC 4.0 BY-SA版权协议

标签

#html

<div class='calendarTable'>
    <div class='calendarHeader'>
        <div class="td Time">Time</div>
        <div class="td Country">Country</div>
        <div class="td Event">Event</div>
        <div class="td Importance">Importance</div>
        <div class="td Actual">Actual</div>
        <div class="td Forecast">Forecast</div>
        <div class="td Previous">Previous</div>
    </div>
    <div class='calendarBody'>
        <div :class="selectIndicators.indexOf(index) != -1 ? 'tr active' : 'tr'" v-for="(item,index) in calendarData" :key="index"  @click="oneIndicatorsClick(index)">
        <div class="td Time" v-html="getLtime(item.Publish_Time)"></div>
        <div class="td Country">
        <img style="width21px;height:14px;margin-right:10px;" :src="'/oem/zjw/oem-zjw-pc/images/country/'+item.Country.toLowerCase()+'.svg'" >
        {{ item.Country }}</div>
        <div class="td Event" >{{ item.Econ_Event }}</div>
        <div class="td Importance" v-if=" item.Event_Impt_Degree==1" style="color:#40A829 ">★</div>
        <div class="td Importance" v-if=" item.Event_Impt_Degree==2" style="color:#40A829">★★</div>
        <div class="td Importance" v-if=" item.Event_Impt_Degree==3" style="color:#40A829">★★★</div>
        <div class="td Actual">{{ item.Actl_Value }}</div>
        <div class="td Forecast">{{ item.Forecast_Value }}</div>
        <div class="td Previous">{{ item.Pre_Value }}</div>
        </div>
</div>