Vue中table合并单元格用法

Posted 2021-01-12 minozmin

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