Vue中table合并单元格用法

最新推荐文章于 2025-06-17 16:09:34 发布

转载最新推荐文章于 2025-06-17 16:09:34 发布 · 1.1k 阅读

2 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/minozMin/p/9789987.html

文章标签：

#javascript #ViewUI

本文介绍了一种使用Vue.js框架展示复杂表格数据的方法，包括如何处理不同地名下的人员信息，以及根据任务完成状态进行视觉区分。通过具体示例，展示了如何在表格中嵌套数据并保持良好的可读性和响应性。

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

<table>
    <tr>
        <th>地名</th>
        <th>结果</th>
        <th>人名</th>
        <th>性别</th>
    </tr>
    <template v-for="(item, index) in list">
        <tr :key="index">
            <td :rowspan="item.groups.length">{{item.name}}</td>
            <td :rowspan="item.groups.length" v-if="item.result === '1'">
    　　　　　　  <span>已完成</span>
　　　　　　　</td>
            <td :rowspan="item.groups.length" v-if="item.result === '0' || item.result === null">
                <span>未完成</span>
            </td> 
            <td>{{item.groups[0].name}}</td>
            <td>{{item.groups[0].sex}}</td>
        </tr>
        <tr v-for="(son, index) in item.groups.length - 1" :key="index">
            <td>{{item.groups[son].name}}</td>
            <td>{{item.groups[son].sex}}</td>
        </tr>
    </template>
</table>

<script>
    export default {
        data() {
            return {
                list: [{
                    name: '地名1',
                    result: '1',
                    groups: [{
                        name: '张三',
                        sex: '男'
                    }, {
                        name: '李四',
                        sex: '男'
                    }, {
                        name: '小芳',
                        sex: '女'
                    }]
                },{
                    name: '地名2',
                    result: '1',
                    groups: [{
                        name: '王小二',
                        sex: '男'
                    }, {
                        name: '玲',
                        sex: '女'
                    }]
                },{
                    name: '地名3',
                    result: '0',
                    groups: [{
                        name:'/',
                        sex: '/'
                    }]
                }]
            }
        }
    }
</script>