接手之前后端做的vue项目,里面很多tabel页面除了具体的列名其他的逻辑功能,展示都是一样的。所以自己做了优化:根据后端传的数据动态展示不同的列。
<template>
<div>
<el-table
:data="list"
style="width: 100%;">
<el-table-column
v-for="(item, index) in tableHeader"
:key="index"
:prop="index"
:label="item"
></el-table-column>
</el-table>
</div>
</template>
<script>
export default {
data () {
return {
list: [],
tableHeader: {},
}
},
created () {
this.list = [{ caseListName: 'zss', caseListType: 'kkk' },
{ caseListName: 'zss', caseListType: 'kkk' },
{ caseListName: 'zss', caseListType: 'kkk' },]
this.tableHeader = { caseListName: 'caseListName', caseListType: 'caseListType' }
},
}