需求一:
后端返回字段 name: "|KDFL|order001|skin001|" 当做 el-table-column 得 label 展示
后端返回字段 code: "|KDFL|test0815003|KDFLLD230815000003|" 当做 el-table-column 得 prop展示
效果:
- 拿到后端数据处理
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>