ElementUI表格动态设置表头label数据_el-table label是值怎么赋

业务需求：需要使用Element组件库做一个table表头动态改变的数据table

分析问题

我们使用Element的table，常用的方式是通过绑定需要的表格data数据，数据格式为对象数组。这时，对于表头的label，我们通常是直接写label=‘姓名’

<el-table :data="raceData" height="50vh" border style="width: 100%">
    /*label='序号'*/
	<el-table-column prop="name" label="序号" align='center' width='80'>
		<template slot-scope='scope'>
			<span>{{scope.$index+1}}</span>
		</template>
	</el-table-column>
</el-table>
1
2
3
4
5
6
7
8

但是，以上两种方式都是在已知表头数据长度的情况下使用的，如果我们遇到表头数据长度不确定的情况下我们应该怎么办呢？请接着往下看~

解决问题

对于表头数据长度不确定的情况，我们就不能将表头内容写了，我们可以采用遍历表头的方法来达成我们的需求：

<el-table height='550' :data="dataBody" border style="width: 100%">
    /*我们可以在此处遍历表头的数据dataHeader 然后绑定给label*/
	<el-table-column :label="item" min-width='100' v-for="(item,index) in dataHeader">
		<template slot-scope='scope'>
			<span>{{scope.row[index]}}</span>
		</template>
	</el-table-column>
</el-table>

//data
dataHeader: ['序号','姓名','年龄'],
dataInfo: [{id:1,name:'qc',age:20}],
1
2
3
4
5
6
7
8
9
10
11
12

不知道大家注意到没有，遍历表头数据的话我们就需要将表头数据单独拎到一个数组中，也就是说我们从后台获取到数据之后，需要对请求到的表格数据进行简单处理，这里大家不要忘咯！！！

结果展示

最后就成功的将表头数据遍历出来啦

end~~~

鉴于笔者水平有限，若本文存在不当之处欢迎指出噢

有疑问的同学，欢迎在下方留言

若未能及时回答，也可以选择加入前端开发交流群提问噢~~

群号：216644014(前端开发交流群)