element-ui 动态表头渲染表格

最新推荐文章于 2024-09-29 14:15:21 发布

转载最新推荐文章于 2024-09-29 14:15:21 发布 · 4.6k 阅读

5 ·

CC 4.0 BY-SA版权

原文链接：https://yq.aliyun.com/articles/633437

文章标签：

#ui #javascript #json #ViewUI

本文介绍了一种根据动态数据schema创建表格的方法。不同于ElementUI官方文档中静态的表格渲染方式，此方法能够处理未知字段的JSON数据，实现灵活的表格布局。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

在ElementUI官方文档中，描述的动态渲染只是单纯的将已知字段名称的JSON数据通过prop属性填充到页面中，下为官方文档内容

<template>
    <el-table :data="tableData" style="width: 100%">
      <el-table-column prop="date" label="日期" width="180"></el-table-column>
      <el-table-column prop="name" label="姓名"  width="180"></el-table-column>
      <el-table-column prop="address" label="地址"></el-table-column>
    </el-table>
  </template>

  <script>
    export default {
      data() {
        return {
          tableData: [{
            date: '2016-05-02',
            name: '王小虎',
            address: '上海市普陀区金沙江路 1518 弄'
          }, {
            date: '2016-05-04',
            name: '王小虎',
            address: '上海市普陀区金沙江路 1517 弄'
          }, {
            date: '2016-05-01',
            name: '王小虎',
            address: '上海市普陀区金沙江路 1519 弄'
          }, {
            date: '2016-05-03',
            name: '王小虎',
            address: '上海市普陀区金沙江路 1516 弄'
          }]
        }
      }
    }
  </script>

其中，表格的key值都是固定的。但是针对key值不固定的json数据的渲染，官方文档并未给出明确信息。最近在写项目的时候涉及到的一项需求就是把后台请求到的json数据渲染到页面，但key值并不固定，导致不能按照官方文档提出的方式进行直接渲染。

下面实例为如何根据数据数据schema来动态创建表格，其中header和data_list的数据可以通过后台获取，进而实现表格的动态创建

<template>
  <el-table :data="data_list">
     <el-table-column  :label="date" v-for="(date, key) in header">
             <template scope="scope">
                   {{data_list[scope.$index][key]}}
              </template>
       </el-table-column>
    </el-table>
  </template>
 <script>
      export default {
      data() {
            return {
                header:["column1","column2", "column3"],
                data_list:[
                    [1, 2, 3],
                    [4,5,6]
                ]
            }
        }
    }
 </script>