table表格循环渲染数据，行合并

fanxingxue

已于 2023-04-21 11:10:07 修改

阅读量525

点赞数

文章标签： css html javascript

于 2023-04-05 09:05:24 首次发布

本文链接：https://blog.csdn.net/fanxingxue/article/details/129965909

版权

参考链接：参考链接

效果图：

代码：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="static/iconfont/iconfont.css">
    <script src="vue.min.js"></script>     
    <style>
        thead,tbody{
            text-align: center;
        }
        tbody td{
            font-size: 0.9em;
            padding: 2px 15px;
        }
        .red{
            color: 	#d43030;
        }
        .black{
            color: #383838;
        }
        .blue{
            color:#5784f7;
        }
        .gray{
            color:#808080;
        }
        .bluebtn{
            background: #5784f7;
            border-radius: 3px;
            color: #fff;
            padding: 3px 5px;
        }
    </style>
</head>

<body>
    <div id="app">
        <table border="1" cellspacing="0" bordercolor="#e7e7e7">
            <thead>
                <tr>
                    <td>
                        <input type="checkbox" id="scales" name="scales" >
                    </td>
                    <td>排序</td>
                    <td>类型</td>
                    <td>标题</td>
                    <td>内容</td>
                    <td>附件</td>
                    <td>结束时间</td>
                    <td>任务</td>
                    <td>所用时长</td>
                    <td>完成状态</td>
                    <td>操作</td>
                    <td>删除</td>
                   
                </tr>
            </thead>
            <tbody v-for="(item,index) in list" :key="index">
                <tr>

                    <td :rowspan='list[index].child.length'>  
                        <input type="checkbox" id="scales" name="scales">
                    </td>
                    <td :rowspan='list[index].child.length'>
                        <i class="iconfont icon-updown"></i>
                    </td>
                    <td :rowspan='list[index].child.length' :class="item.type=='紧急' ? 'red' : 'black'">{{item.type}}</td>  
                    <td :rowspan='list[index].child.length'>{{item.title}}</td>
                    <td :rowspan='list[index].child.length'>{{item.content}}</td>
                    <td :rowspan='list[index].child.length'>{{item.annex}}</td>
                    <td :rowspan='list[index].child.length'>{{item.end_time}}</td>
                    <td>{{item.child[0].name}}</td>
                    
                    <td class="gray">{{item.child[0].duration}}</td>
                    <td v-if="item.child[0].state=='已完成'">
                        <div class="bluebtn">已完成</div> 
                    </td>
                    <td class="gray" v-else>{{item.child[0].state}}</td>
                    <td class="blue">查看</td>
                    <td style="color:#ff5733">删除</td>
                </tr>
                <tr v-for="(val,index1) in item.child.slice(1)" :key="index1">
                    <td>{{val.name}}</td> 
                    </td>   
                    <td class="gray">{{val.duration}}</td>
                    <td v-if="val.state=='已完成'">
                        <div class="bluebtn">已完成</div> 
                    </td>
                    <td class="gray" v-else>{{val.state}}</td>
                    <td class="blue">查看</td>
                    <td style="color:#ff5733">删除</td>
                  </tr>
          
            </tbody>




        </table>
    </div>
    

</body>
<script>
   
    var app = new Vue({
        el: '#app',
        data() {    
            return {
                list: [{
                    type: '紧急',
                    title: '通知',
                    content: '123455',
                    annex: '附件',
                    end_time: '2023-05-04 18:00',
                    child:[{
                        name: '任务一',
                        duration: '25分钟',
                        state: '已完成'
                    },{
                        name: '任务二',
                        duration: '45分钟',
                        state: '未完成'
                    },{
                        name: '任务三',
                        duration: '55分钟',
                        state: '已完成',
                    }]
                },{
                    type: '常规',
                    title: '通知',
                    content: '123455',
                    annex: '附件',
                    end_time: '2023-05-04 18:00',
                    child:[{
                        name: '任务一',
                        duration: '25分钟',
                        state: '已完成'
                    },{
                        name: '任务二',
                        duration: '45分钟',
                        state: '未完成'
                    },{
                        name: '任务三',
                        duration: '55分钟',
                        state: '已完成',
                    }]
                }]
            }

        }
    })
</script>

</html>