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

最新推荐文章于 2024-06-30 11:06:07 发布
最新推荐文章于 2024-06-30 11:06:07 发布
阅读量1.1k 收藏
点赞数
分类专栏： Vue 文章标签： html vue.js css
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_37523855/article/details/112260161
版权

<!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>

        <link href="../../css/mui.min.css" rel="stylesheet" />
    </head>
    <body class="shujubiao_auto">
        <header class="mui-bar mui-bar-nav" id="doublerefesh">
            <a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
            <h1 class="mui-title">生产数据详情</h1>
        </header>

        <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>

<script>
    var _type = 1;
    mui.init({
        swipeBack: false,
        gestureConfig: {
            doubletap: true
        },
        pullRefresh: {
            container: '#pullrefresh',
            down: {
                style: 'circle',
                callback: downlist
            },
            up: {
                height: 50,
                contentrefresh: "正在加载...",
                contentnomore: '没有更多数据了',
                callback: uplist
            }
        }
    });

    var vm = new Vue({
        el: "#vue_app",
        data: {
            list: [],
            currentIndex: 0,
            onlinee: 0
        },
        created: function() {
            this.InitList(_type);
        },
        computed: {

//计算属性，如果其中某个值满足条件，将当前行变色
            activation() {
                return (unloaddate) => {
                    if (unloaddate == null)
                        return;
                    var undate = new Date(unloaddate).Format("yyyy-MM-dd hh:mm:ss");
                    if (undate > "2000-01-05 18:35:22") {
                        return {
                            'color': 'green'
                        }
                    }
                }
            }
        },
        methods: {
            InitList: function(e) {
                console.log(e);
                var that = this;
                $.ajax({
                    contentType: "application/json",
                    async: false,
                    type: "get",
                    url: "",
                    data: {
                        type: e
                    },
                    headers: {
                        Authorization: GetToken()
                    },
                    success: function(res) {
                        if (res.Success) {
                            if (res.result.length > 0) {
                                that.list = res.result;
                            } else {
                                that.list = null;
                                phihamshow("当前未查询到任何生产信息！");
                            }
                        } else {
                            mui.toast(res.Message);
                        }
                    },
                    error: function(xhr, type, errorThrown) {
                        console.log(JSON.stringify(xhr))
                        mui.plusReady(function() {
                            plus.nativeUI.showWaiting(xhr.responseJSON.Message);
                            setInterval(function() {
                                plus.nativeUI.closeWaiting();
                                location.reload();
                            }, 2000)
                        })
                    }
                })
            },
            UpdownList: function(flag) {
                $.ajax({
                    contentType: "application/json",
                    async: false,
                    type: "get",
                    url: "",
                    data: {
                        type: _type
                    },
                    headers: {
                        Authorization: GetToken()
                    },
                    success: function(res) {
                        if (res.Success) {
                            if (flag) {
                                if (res.result.length > 0) {
                                    vm.$data.list.reverse();
                                    vm.$data.list = vm.$data.list.concat(res.result)
                                    vm.$data.list.reverse();
                                } else {
                                    phihamshow("当前未查询到任何信息！");
                                }
                            } else {
                                if (res.result.length <= 0)
                                    phihamshow("当前未查询到任何信息！");
                                else
                                    vm.$data.list = vm.$data.list.concat(res.result)
                            }
                        } else {
                            mui.toast(res.Message);
                            if (flag)
                                mui('#pullrefresh').pullRefresh().endPulldownToRefresh();
                            else
                                mui('#pullrefresh').pullRefresh().endPullupToRefresh();
                        }
                    },
                    error: function(xhr, type, errorThrown) {
                        console.log(JSON.stringify(xhr))
                        mui.plusReady(function() {
                            plus.nativeUI.showWaiting(xhr.responseJSON.Message);
                            setInterval(function() {
                                plus.nativeUI.closeWaiting();
                                location.reload();
                            }, 2000)
                        })
                    }
                })
            },
            showProcess: function(e) {
                var barcode = e;
                var btnArray = ['否', '是'];
                mui.confirm('是否查看当前: </br>' + barcode + "工件执行过程 ?", '提示！', btnArray, function(e) {
                    if (e.index == 1) {
                        mui.openWindow({
                            url: "ProductionInfoProcess.html?id=" + barcode,
                            id: "ProductionInfoProcess.html"
                        });
                    }
                }, "div")
            },
            color: function(index) {
                this.currentIndex = index;
            },
        }
    })

    function downlist() {
        setTimeout(function() {
            vm.UpdownList(true);
            mui('#pullrefresh').pullRefresh().endPulldownToRefresh();
        }, 1500);
    }

    function uplist() {
        setTimeout(function() {
            vm.UpdownList(false);
            mui('#pullrefresh').pullRefresh().endPullupToRefresh();
        }, 1500);
    }

    document.getElementById('spana1').addEventListener('tap', function() {
        _type = 1;
        vm.InitList(_type);
    })

    document.getElementById('spana2').addEventListener('tap', function() {
        _type = 2;
        vm.InitList(_type);
    })

    document.getElementById('spana3').addEventListener('tap', function() {
        _type = 3;
        vm.InitList(_type);
    })

    document.getElementById('doublerefesh').addEventListener('doubletap', function() {
        mui('#pullrefresh').pullRefresh().scrollTo(0, 0, 100);
    })
</script>

<style>

/*单击行变色*/
    .active {
        color: red;
    }

    .online {
        color: #008000;
    }

    .span {
        width: 35px;
        height: 35px;
        border-radius: 45%;
        background: #f0f0f0;
        display: block;
        margin-left: 35%;
    }

    .tb table {
        width: 100%;
        border: 0px;
        margin-top: 0.3125rem;
        margin-left: 0.3125rem;
    }

    .shujubiao_auto .tb table th {
        line-height: 36px;
        height: 36px;
        font-size: 14px;
        color: #55aa7f;
    }

    .tb table tr {
        color: #000000;
        text-align: center;
        line-height: 36px;
    }
</style>

爱吃火龙果的仙人掌
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
vue v-for 点击当前行,获取当前行数据及event当前事件对象的操作
10-14
在Vue.js中，`v-for`指令用于循环渲染列表数据，而通过添加点击事件，我们可以实现用户交互，例如点击某一行获取该行的数据。本文将详细介绍如何在Vue中使用`v-for`结合点击事件来获取当前行的数据以及事件对象。 ...
vue 根据不同的状态显示不同的颜色
m0_56272227的博客
11-14 4287
根据不同状态显示不同颜色
表格某一列根据值不同，显示不同颜色vue
m0_68428581的博客
04-18 2384
status的值来自字典。
Vue3实现点击按钮实现文字变色
最新发布
m0_62785037的博客
06-30 604
Vue3实现点击按钮实现文字变色方法，如动态样式、动态类名
VUE|el-table-column表格根据不同值，显示不同颜色
craftsman2020的博客
02-07 8472
文章目录1. 代码2. 效果图 vue前端|element|el-table-column表格颜色|根据内容设置表格颜色 1. 代码 <el-table-column prop="log" label="Diy Log" height="10" sortable min-width="690"> <template slot-scope="scope"> <div :style="{'color':scope.row.log.indexOf('E
vue值发生变化颜色就变化，值变化时获取值
lslsllsl的博客
09-26 626
<template slot-scope="scope"> <el-date-picker id="fname1" class="date" v-model="scope.row.paymentMonth" :class="scope.row.redClassFlag1 && 'red-class'" type="month" :disabled="!scope.row.changeNums" format="yyyy年MM月" @change="ch..
vue 根据不同状态改变内容 并添加相应的颜色
ZZHK666的博客
02-15 3559
vue 遍历动态改变字体颜色
vue element实现表格合并行数据
01-18
本文实例为大家分享了vue element实现表格合并行数据的具体代码，供大家参考，具体内容如下 支持不分页的表格数据，分页的表格数据还有小bug xss=removed span-method=objectSpanMethod> 序号 prop=id ...
Vue 页面状态保持页面间数据传输的一种方法(推荐)
10-17
vue router给我们提供了两种页面间传递参数的方式,一种是动态路由匹配，一种是编程式导航，接下来通过本文给大家介绍Vue 页面状态保持页面间数据传输的一种方法,需要的朋友可以参考下
使用vue根据状态添加列表数据和删除列表数据的实例
10-17
在本文中，我们将深入探讨如何使用Vue.js框架根据状态添加和删除列表数据。Vue.js是一个轻量级的前端JavaScript框架，它提供了强大的数据绑定和组件化功能，使得动态管理列表数据变得简单易行。以下是一个具体的实例...
vue获取data数据改变前后的值方法
01-19
场景：购物车增加商品数量同时更新bridge标志上的总商品个数，如果只是加上当前变化后的数量的话则之前原有的数量会被重新添加一遍造成计算错误。因此要减去变化前的数量才能得到添加的数量。 方法一： 直接watch...
vue单页应用在页面刷新时保留状态数据的方法
10-17
今天小编就为大家分享一篇vue单页应用在页面刷新时保留状态数据的方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
vue 中 elment-ui table合并上下两行相同数据单元格
12-29
html ： align=center v-loading=loading height=tableHeight span-method=objectOneMethod > <el align=center prop=projName></el> <el-tab
Vue+Element ui 根据后台返回数据设置动态表头操作
10-14
通过`slot-scope`插槽，我们可以将`table_content`的当前行数据和列索引结合起来，显示对应的表格值。HTML代码如下： ```html (val, i) in table_head" :key="i"> <template slot-scope="scope">{{table_content...
改变vue请求过来的数据中的某一项值的方法(详解)
08-27
下面将详细介绍在Vue中如何正确地更改请求到的数据中某一项的值。 首先，Vue.js 无法检测到的数组变动包括： 1. 直接设置数组项：`vm.items[indexOfItem] = newValue` 2. 修改数组长度：`vm.items.length = ...
vue 循环加载数据并获取第一条记录的方法
12-29
最近使用elment ui和vue.js，遇到需要像c:foreach类似的效果，就找了 vue的API：https://cn.vuejs.org/v2/guide/list.html#v-for-with-v-if element ui：http://element.eleme.io/#/zh-CN/component/input 用法： ...
vue的table表格，控制行的样式颜色变化
编程菜鸟的博客
05-11 695
vue的table表格，控制行的样式颜色变化
2021-07-29vue-cli点击一行，此行变红色的三种方法
weixin_43914278的博客
07-29 729
方法一：直接getElementById修改。 <template> <div> <ul> <li v-for="item,index in message" :id="index" v-on:click="change(index)">{{item}}</li> </ul> </div> </template> <script> export default { data
vue动态修改控件颜色值
scimence的专栏
04-28 1558
2、在computed方法体中添加自定义函数，绑定变量，随变量值的变动，返回不同的颜色值。3、自定义变量 （当自定义变量变动时，自动变动颜色值）1、绑定控件颜色值到指定的computed函数。
vue v-html 改变数据中某些文字的颜色
地瓜哥哥的博客
12-16 4281
有的需求是，一段文字中，有几个字，词语需要标记，画重点，改颜色 如果后端能给你处理好，单独返回那好说，如果后端懒，不想给你分开弄，一股脑全给你扔来 那就只能靠自己了 <div style="width: 60rpx;display: flex;" v-html="text">}</div> 比如后端给你扔了个text，内容是"我愿变成童话里，你爱的那个天使" 需求是你要把，童话，天使变颜色，所以加上v-html，添加一个标签 代码如下： var str = '我愿变成童话里，你爱的
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值