Vue中实现表格隔行换色效果

最新推荐文章于 2024-04-29 17:14:49 发布

相逢不晚何必匆匆

最新推荐文章于 2024-04-29 17:14:49 发布

阅读量6.7k

点赞数 10

分类专栏： # Vue 文章标签： Vue 隔行换色表格循环 JavaScript HTML

本文链接：https://blog.csdn.net/ZhangJiWei_2019/article/details/119865296

版权

Vue 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

一、原理

在 Vue 中，进行表格行的循环输出时，一般使用 v-for 指令，每次循环都能得到该行的索引 index ，用每一行的索引除以2取余，余数等于1，可以使用一种颜色作为背景色，余数等于0，可以使用另一种颜色作为背景色。

二、代码实现

1. Style 部分

<style>
    #app {
        margin: 50px;
    }
    .table {
        width: 30%;
    }
    .table tr {
        text-align: center;
        height: 30px;
    }
    .table th,td {
        border: gainsboro 1px solid;
    }
    /* 定义余数为 0 的行颜色 */
    .tr-color-0 {
        background: #f0f0f0;
    }
    /* 定义余数为 1 的行颜色 */
    .tr-color-1 {
        background: #fff;
    }
</style>

2. HTML 部分

<div id="app">
   <table class="table" cellpadding="0" cellspacing="0">
       <thead>
           <tr>
               <th>序号</th>
               <th>品牌</th>
               <th>数量</th>
               <th>备注</th>
           </tr>
       </thead>
       <tbody>
       		<!-- 用索引值除以 2 取余 -->
           <tr v-for="(item, index) in list" :class="'tr-color-' + index % 2">
               <td>{{item.id}}</td>
               <td>{{item.name}}</td>
               <td>{{item.num}}</td>
               <td>{{item.desc}}</td>
           </tr>
       </tbody>
   </table>
</div>

3. JavaScript 部分

<script type="text/javascript" src="js/vue.min.js"></script>
<script type="text/javascript">
    new Vue({
        el: "#app",
        data: {
        	// 模拟数据
            list: [
                {
                    id: 1,
                    name: '小米',
                    num: 7435,
                    desc: '采购'
                },
                {
                    id: 2,
                    name: '华为',
                    num: 7682,
                    desc: '采购'
                },
                {
                    id: 3,
                    name: 'OPPO',
                    num: 2262,
                    desc: '采购'
                },
                {
                    id: 4,
                    name: 'VIVO',
                    num: 3512,
                    desc: '采购'
                }
            ]
        }
    })
</script>

三、完整代码

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <!-- Set render engine for 360 browser -->
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Vue 列表隔行换色</title>
    <style>
        #app {
            margin: 50px;
        }
        .table {
            width: 30%;
        }
        .table tr {
            text-align: center;
            height: 30px;
        }
        .table th,td {
            border: gainsboro 1px solid;
        }
        .tr-color-0 {
            background: #f0f0f0;
        }
        .tr-color-1 {
            background: #fff;
        }
    </style>
</head>
<body>
    <div id="app">
        <table class="table" cellpadding="0" cellspacing="0">
            <thead>
                <tr>
                    <th>序号</th>
                    <th>品牌</th>
                    <th>数量</th>
                    <th>备注</th>
                </tr>
            </thead>
            <tbody>
                <tr v-for="(item, index) in list" :class="'tr-color-' + index % 2">
                    <td>{{item.id}}</td>
                    <td>{{item.name}}</td>
                    <td>{{item.num}}</td>
                    <td>{{item.desc}}</td>
                </tr>
            </tbody>
        </table>
    </div>
    <script type="text/javascript" src="js/vue.min.js"></script>
    <script type="text/javascript">
        var vm = new Vue({
            el: "#app",
            data: {
                list: [
                    {
                        id: 1,
                        name: '小米',
                        num: 7435,
                        desc: '采购'
                    },
                    {
                        id: 2,
                        name: '华为',
                        num: 7682,
                        desc: '采购'
                    },
                    {
                        id: 3,
                        name: 'OPPO',
                        num: 2262,
                        desc: '采购'
                    },
                    {
                        id: 4,
                        name: 'VIVO',
                        num: 3512,
                        desc: '采购'
                    }
                ]
            }
        })
    </script>
</html>