element-ui el-table 展示多列重复数据

项目中显示表格，内容只有两列数据，所以当数据很多的时候，可以重复3遍这两列数据，显示在页面上。如下图所示：姓名成绩姓名成绩姓名成绩张三60李四70王五80小明66小红67小美90小王88使用vue + element UIjs代码export default {data() {return {tableData:[{name:'张三',poi

qq_20494353

3636人浏览 · 2021-03-03 11:28:45

qq_20494353 · 2021-03-03 11:28:45 发布

项目中显示表格，内容只有两列数据，所以当数据很多的时候，可以重复3遍这两列数据，显示在页面上。如下图所示：

姓名	成绩	姓名	成绩	姓名	成绩
张三	60	李四	70	王五	80
小明	66	小红	67	小美	90
小王	88

使用vue + element UI

js代码


export default {
    data() {
        return {
             tableData:[
            	{name:'张三',point:'60'},
            	{name:'李四',point:'70'},
            	{name:'王五',point:'80'},
            	{name:'小明',point:'66'},
            	{name:'小红',point:'67'},
            	{name:'小美',point:'90'},
            	{name:'小王',point:'88'}
			],
			tableList:[]
        }
    },
    created() {
        if(this.tableData.length>0){
             let num=Math.ceil(this.tableData.length/3)
             for (let j = 0; j < num; j++) {
                 this.tableList.push({})                            
             }
         }
    },
}

页面代码

<template>
    <div>
        <el-table border :data="tableList">
            <template v-if="tableData.length==0">
                <el-table-column label="姓名" align="center" prop="name"></el-table-column>
                <el-table-column label="成绩" align="center" prop="point"></el-table-column>
            </template>
            <template v-else v-for="(val,index) in tableData.length>3?3:tableData.length">
                <el-table-column label="姓名" align="center" prop="name">
                    <template slot-scope="scope" v-if="scope.$index*3+index<tableData.length">{{tableData[scope.$index*3+index].name}}</template>
                </el-table-column>
                <el-table-column label="成绩" align="center" prop="point">
                    <template slot-scope="scope" v-if="scope.$index*3+index<tableData.length">{{tableData[scope.$index*3+index].point}}</template>
                </el-table-column>
            </template>
        </el-table>
    </div>
</template>