在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>