element-plus el-table动态循环展示el-table-column得label+prop

需求一：

后端返回字段  name: "|KDFL|order001|skin001|" 当做 el-table-column 得 label 展示

后端返回字段  code: "|KDFL|test0815003|KDFLLD230815000003|" 当做 el-table-column 得 prop展示

效果：

1. 拿到后端数据处理

 const group = ref([])

	tableData.value?.map((item, index) => {
				let arr = getnewarr(item.name?.split('|'), item.code?.split('|'))

				list.push(arr)
				tableData.value[index] = Object.assign(tableData.value[index], arr)
			})
			for (const key in list[list?.length - 1]) {
				group.value.push({ prop: key })
			}
})

 2.table循环group数组展示

<template #table>
			<el-table :data="tableData" :border="true">
				<el-table-column type="index" label="序号" />
				<el-table-column v-for="(column, index) in group" :label="column.prop" :key="index" :prop="column.prop"
					show-overflow-tooltip width="150">
					<template v-slot:header>
						<span>{{ column.prop }}({{ index + 1 }})</span>
					</template>
				</el-table-column>
				<el-table-column prop="dimensions" label="维度组"  />
			</el-table>
		</template>

需求二：增加table问号提示

效果图：

 1.element-plus使用el-popover

<el-table :data="tableData" :border="true" >
				<el-table-column type="index" label="序号" min-width="55" />
				<el-table-column v-for="(column, index) in group" :label="column.prop" :key="index" :prop="column.prop"
					show-overflow-tooltip width="150">
					<template v-slot:header>
						<span>{{ column.prop }}({{ index + 1 }})</span>
						<el-popover placement="top-start" effect="dark" :width="180" trigger="hover" content="维保模板中得维保顺序号">
							<template #reference>
								<el-icon>
									<QuestionFilled />
								</el-icon>
							</template>
						</el-popover>
					</template>
				</el-table-column>
				<el-table-column prop="dimensions" label="维度组"/>
			</el-table>