ElementUI表格动态设置表头label数据

最新推荐文章于 2024-09-04 11:10:15 发布

木子_火山

最新推荐文章于 2024-09-04 11:10:15 发布

阅读量2.1w

点赞数 8

分类专栏： Element 前端 VUE 文章标签： vue.js html 前端

本文链接：https://blog.csdn.net/qq_41654105/article/details/108417504

版权

前端同时被 3 个专栏收录

12 篇文章 0 订阅

订阅专栏

VUE

8 篇文章 0 订阅

订阅专栏

Element

4 篇文章 0 订阅

订阅专栏

业务需求：需要使用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>

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

解决问题

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

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