element vue3 el-table 动态列

蜡笔大杺

已于 2024-03-02 12:15:46 修改

阅读量416

点赞数 3

文章标签： vue.js javascript 前端

于 2024-03-01 09:58:54 首次发布

本文链接：https://blog.csdn.net/qq_44871531/article/details/136387810

版权

本文介绍了如何在Vue.js中使用ElementUI的el-table组件进行列配置，区分数据类型（prop），以及如何根据slot属性动态渲染文本和图表。展示了如何处理空数据和图表数据的嵌入。

摘要由CSDN通过智能技术生成

//列
//prop:相当于<el-table-column type="index" label="序号"/>中的type对应的列值
//slot:为true表示展示图表
let columns= ref<any[]>([
	{ label: 'x1', prop: 'b', slot: false, key: 'p1' },
	{ label: 'x2', prop: '', slot: false, key: 'p2' },
	{ label: 'x3', prop: '', slot: true, key: 'p3' },
	{ label: 'x3', prop: '', slot: true, key: 'p4' },
	{ label: 'x4', prop: '', slot: true, key: 'p5' },
	
])


<el-table :data="Data" style="width: 100%" border>
	<el-table-column v-for="(item, index) in columns" :key="index" show-overflow-tooltip :prop="item.key" 	      :width="item.width" :label="item.label">
		<template v-slot="scope">
			<template v-if="item.prop != ''">
				{{ scope.row[item.prop] }}
			</template>
			
			<template v-if="item.prop == ''">
					{{ scope.row[item.prop] }}
			</template>
			<template v-if="item.slot">
				<!-- 展示图标吧slot改为true -->
				<charts :chartdata="scope.row.chartdata"
						:staticdata="scope.row.data">
					</charts>
			</template>
		</template>
	</el-table-column>
	<template #empty>
				<el-empty description="暂无数据" />
			</template>
</el-table>