Element--生成不定列的表格

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'
        }
      ]

3、效果
Element--生成不定列的表格_第1张图片

血海无涯苦作舟!!!

你可能感兴趣的:(前端-Element,elementui)