vue 单击行数据变色，根据某一行数据状态改变当前数据颜色

最新推荐文章于 2024-01-11 13:26:18 发布

爱吃火龙果的仙人掌

最新推荐文章于 2024-01-11 13:26:18 发布

阅读量1.2k

点赞数

CC 4.0 BY-SA版权

分类专栏： Vue 文章标签： html vue.js css

本文链接：https://blog.csdn.net/qq_37523855/article/details/112260161

本文档展示了如何使用MUI库构建一个生产数据展示页面，包括滑块选择日期范围和动态表格，以及数据的实时刷新和双击事件处理。通过Ajax获取数据并实现列表的上下拉刷新功能。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!DOCTYPE html>
<html>
   <head>
       <meta charset="utf-8">
       <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
       <title></title>

       <div id="vue_app" class="mui-content">
           <div id="slider" class="mui-slider" style="background-color: #55aaff; color: #000000;">
               <div class="mui-segmented-control mui-segmented-control-inverted">
                   <a id="spana1" class="mui-control-item">
                       <span class="span">当日</span>
                   </a>
                   <a id="spana2" class="mui-control-item">
                       <span class="span">本周</span>
                   </a>
                   <a id="spana3" class="mui-control-item">
                       <span class="span">当月</span>
                   </a>
               </div>
           </div>
           <div class="tb">
               <table border="0" id="pullrefresh">
                   <tr>
                       <th>序号</th>
                       <th>订单号</th>
                       <th>流水号</th>
                   </tr>
                   <tr v-for="(item,index) in list">
                       <td>{ {index+1}} </td>
                       <td :style="activation(item.UnloadDate)">{ {item.OrderNo}}</td>
                       <td v-on:click="color(index)" :class="{active:currentIndex === index}" v-on:dblclick="showProcess(item.BarCode)">
                           { {item.BarCode}}</td>
                   </tr>
               </table>
           </div>
       </div>
   </body>
</html>