Element--生成不定列的表格

news2025/4/8 12:29:33

1、对于一些场景，前端可能需要展示不定列数的数据；譬如考勤，可能有的人是一天一次上下班打卡，有的人是一天两次上下班打卡。这个时候统计就需要更具人员做不同的展示，不能固定在前端写死列的属性。

2、代码示例
（1）、表格体
dataList是数据，tableDate为表头

<el-table border style="width: 100%" height="100%" :data="dataList">
          <template v-for="item in tabledData">
            <el-table-column
              :key="item.tableNmae"
              width="100"
              :label="item.tableNmae"
              align="center"
            >
              <template slot-scope="scope">
                <span>{{ scope.row[item.tableCode] }}</span>
              </template>
            </el-table-column>
          </template>
        </el-table>

（2）、数据封装
数据展示如下示例，tabledData为表头数据，tableList为业务数据，业务数据的每一条数据都需要包含表头数据的全部列才可以。
真实开发中，后台可按照如下的示例开发接口，在初始化时异步获取数据即可。

tabledData: [
        {
          tableNmae: '姓名',
          tableCode: 'name'
        },
        {
          tableNmae: '性别',
          tableCode: 'Gender'
        },
        {
          tableNmae: '属性1',
          tableCode: 'aaa'
        },
        {
          tableNmae: '属性2',
          tableCode: 'bbb'
        }
      ],
      dataList: [
        {
          name: '小红',
          Gender: '女',
          aaa: '1111',
          bbb: '1222'
        },
        {
          name: '小黑',
          Gender: '男',
          aaa: '333',
          bbb: '444'
        }
      ]