elementui 动态表格-ElementUI表动态设置表头标签数据

业务需求：需要使用Element组件库制作一个表头动态变化的数据表

文章目录

分析问题

我们使用 Element 的表。 常见的方法是绑定需要的表数据elementui 动态表格，数据格式是对象字段。 这时对于表头的标签，我们一般直接写label='name'

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

然而elementui 动态表格，以上两种方法都是在已知头数据宽度的情况下使用的。 遇到头数据宽度不确定的情况怎么办？ 请继续阅读~

解决这个问题

对于头部数据宽度不确定的情况，我们无法写入头部内容，可以使用遍历头部的方法来满足我们的需求：

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

不知道大家有没有注意到，如果我们遍历头数据，我们需要将头数据单独携带到一个字段中，也就是说我们从后台拿到数据后，需要对请求的数据进行简单的处理表数据。 在这里你别忘了！ ！ ！

结果显示

最终表头数据遍历成功。

结束啦~~~

鉴于作者水平有限，本文如有不当之处，敬请指出。

如果您有任何疑问，请在下方留言

如果不能及时回答，也可以选择加入后端开发交流群提问~~

群号：216644014（前端开发交流群）