2022/2/23 element-ui el-table 展示多列重复数据

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

使用vue + element UI

js代码

export default {
    data() {
        return {
             tableData:[
            	{name:'Wer ist Justin Bieber ',type:'alarm'},
            	{name:'Wer ist Justin Bieber ',type:'alarm'},
                {name:'Wer ist Justin Bieber ',type:'alarm'},
                {name:'Wer ist Justin Bieber ',type:'alarm'},
                {name:'Wer ist Justin Bieber ',type:'alarm'},
                {name:'Wer ist Justin Bieber ',type:'alarm'},
                {name:'Wer ist Justin Bieber ',type:'alarm'},
			],
			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>
  <!-- 表格区域  start-->
        <div class="table">
          <el-table border :data="tableList">
            <template slot="empty">
              <img src="../assets/img/nodata.png" alt="" />
              <div class="noCart">{{ $t("table.nodata") }}</div>
            </template>
             <!-- 无数据时-->
            <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 > 4
                ? 4
                : tableData.length"
            >
              <el-table-column
                label="文本"
                align="center"
                prop="name"
                :key="val.id"
              >
                <template
                  slot-scope="scope"
                  v-if="scope.$index * 4 + index < tableData.length"
                  >{{ tableData[scope.$index * 4 + index].text }}
                  <!-- <span style="color: red">{{
                    tableData[scope.$index * 4 + index].id
                  }}</span>
                  <span style="color: blue"
                    >scope.$index:{{ scope.$index }}</span
                  >
                  <span style="color: pink">index:{{ index }}</span> -->
                </template>
              </el-table-column>
              <el-table-column
                label="标记类型"
                align="center"
                prop="mark"
                :key="val.id"
              >
                <template
                  slot-scope="scope"
                  v-if="scope.$index * 4 + index < tableData.length"
                >
                  <el-select
                    v-model="tableData[scope.$index * 4 + index].mark"
                    filterable
                    allow-create
                    default-first-option
                    placeholder="请选择标记类型"
                    @change="LabelChange(tableData[scope.$index * 4 + index])"
                  >
                    <el-option
                      v-for="item in types"
                      :key="item.value"
                      :label="item.label"
                      :value="item.value"
                    >
                    </el-option> </el-select
                ></template>
              </el-table-column>
            </template>
            <el-table-column label="操作" width="200">
              <template slot-scope="scope" v-for="val in tableData.length">
                <el-button
                  type="primary"
                  @click="onSave(scope.$index)"
                  :key="val"
                  >保存</el-button
                >
              </template>
            </el-table-column>
          </el-table>
        </div>
   
</template>