在vue开发中使用el-table组件,默认有五个表头,根据接口返回的对接上默认的五个表头字段后,还需要根据接口增加表头要怎么做呢?废话不多说,开整……
例如后端返回的数据格式:
skuInfoDTOS: [
{
skuId: 2,
productNo: '10011',
productName: '测试产品1',
productDesc: '测试',
price: 12.1,
chType: 46,
status: 1,
skuAttrValueDTOS: [
{
attrId: 1,
attrName: '面值',
valueId: 1,
valueName: '5'
},
{
attrId: 2,
attrName: '运营商',
valueId: 3,
valueName: '移动'
},
{
attrId: 3,
attrName: '面包',
valueId: 3,
valueName: '喵宝值'
}
],
cardType: null,
skuInfo: null
},
{
skuId: 3,
productNo: '10012',
productName: '测试产品2',
productDesc: '测试',
price: 12.2,
chType: 46,
status: 1,
skuAttrValueDTOS: [
{
attrId: 1,
attrName: '面值',
valueId: 1,
valueName: '5'
},
{
attrId: 2,
attrName: '运营商',
valueId: 4,
valueName: '电信'
}
],
cardType: null,
skuInfo: null
},
{
skuId: 4,
productNo: '10013',
productName: '测试产品3',
productDesc: '测试',
price: 12.3,
chType: 46,
status: 1,
skuAttrValueDTOS: [
{
attrId: 1,
attrName: '面值',
valueId: 2,
valueName: '10'
},
{
attrId: 2,
attrName: '运营商',
valueId: 3,
valueName: '移动'
}
],
cardType: null,
skuInfo: null
},
{
skuId: 5,
productNo: '10014',
productName: '测试产品4',
productDesc: '测试',
price: 12.4,
chType: 46,
status: 1,
skuAttrValueDTOS: [
{
attrId: 1,
attrName: '面值',
valueId: 2,
valueName: '10'
},
{
attrId: 2,
attrName: '运营商',
valueId: 4,
valueName: '电信'
}
],
cardType: null,
skuInfo: null
}
]
默认死的表头为:
以上6个字段对应的是productNo、productName、skuInfo、productDesc、price、status
还需要在表格的前边增加skuAttrValueDTOS这个字段中的数据。
那么就要循环了:
首先在data中定义数据:
data () {
return {
tableData: [], // table的最终数据存放
tableColumns: [ // 这是死的表头
{ prop: 'productNo', label: '产品编号', width: 120 },
{ prop: 'productName', label: '产品名称', width: 200 },
{ prop: 'skuInfo', label: '产品英文编号', width: 150 },
{ prop: 'productDesc', label: '产品描述', width: 150 },
{ prop: 'price', label: '指导价', width: 100 },
{ prop: 'status', label: '是否启用', width: 100 }
],
skuInfoDTOS: [ // 这是后端返回的数据
{
skuId: 2,
productNo: '10011',
productName: '测试产品1',
productDesc: '测试',
price: 12.1,
chType: 46,
status: 1,
skuAttrValueDTOS: [
{
attrId: 1,
attrName: '面值',
valueId: 1,
valueName: '5'
},
{
attrId: 2,
attrName: '运营商',
valueId: 3,
valueName: '移动'
},
{
attrId: 3,
attrName: '面包',
valueId: 3,
valueName: '喵宝值'
}
],
cardType: null,
skuInfo: null
},
{
skuId: 3,
productNo: '10012',
productName: '测试产品2',
productDesc: '测试',
price: 12.2,
chType: 46,
status: 1,
skuAttrValueDTOS: [
{
attrId: 1,
attrName: '面值',
valueId: 1,
valueName: '5'
},
{
attrId: 2,
attrName: '运营商',
valueId: 4,
valueName: '电信'
}
],
cardType: null,
skuInfo: null
},
{
skuId: 4,
productNo: '10013',
productName: '测试产品3',
productDesc: '测试',
price: 12.3,
chType: 46,
status: 1,
skuAttrValueDTOS: [
{
attrId: 1,
attrName: '面值',
valueId: 2,
valueName: '10'
},
{
attrId: 2,
attrName: '运营商',
valueId: 3,
valueName: '移动'
}
],
cardType: null,
skuInfo: null
},
{
skuId: 5,
productNo: '10014',
productName: '测试产品4',
productDesc: '测试',
price: 12.4,
chType: 46,
status: 1,
skuAttrValueDTOS: [
{
attrId: 1,
attrName: '面值',
valueId: 2,
valueName: '10'
},
{
attrId: 2,
attrName: '运营商',
valueId: 4,
valueName: '电信'
}
],
cardType: null,
skuInfo: null
}
]
}
},
// 定义一个方法调用。
created () {
this.processData()
},
methods: {
// 定义一个方法
processData () {
// 定义一个空的对象
const dynamicHeaders = {}
// 循环后端给的数据中的skuAttrValueDTOS字段,也就是需要在表格动态增加的数据。
this.skuInfoDTOS.forEach(item => {
item.skuAttrValueDTOS.forEach(attr => {
// 判断如果为false就走
if (!dynamicHeaders[attr.attrName]) {
// 给每一项循环出来的表头来定义
dynamicHeaders[attr.attrName] = { prop: `attr_${attr.attrId}`, label: attr.attrName, width: 120 }
}
})
})
// 最终的表头定义。结构出来放在死的表头前边。
this.tableColumns = [
...Object.values(dynamicHeaders), // 这是根据后端给的数据,处理完成后的数据并解构
...this.tableColumns // 这是死的表头数据 解构
]
// 这里往table绑定的数据中 赋值。
this.tableData = this.skuInfoDTOS.map(item => {
const data = {
productNo: item.productNo,
productName: item.productName,
skuInfo: item.skuInfo,
productDesc: item.productDesc,
price: item.price,
status: item.status
}
// 循环后端给的数据中的表头对应的值,并赋值给每一项
item.skuAttrValueDTOS.forEach(attr => {
data[`attr_${attr.attrId}`] = attr.valueName
})
// 最终返回去这个 重构好新的数据。
return data
})
}
}
以上是数据处理的全部步骤
以下是全部的代码。
<template>
<el-table :data="tableData" border>
<el-table-column v-for="(column, index) in tableColumns" :key="index" :prop="column.prop" :label="column.label"
header-align="center" align="center" :width="column.width"></el-table-column>
</el-table>
</template>
<script>
export default {
data () {
return {
tableData: [],
tableColumns: [
{ prop: 'productNo', label: '产品编号', width: 120 },
{ prop: 'productName', label: '产品名称', width: 200 },
{ prop: 'skuInfo', label: '产品英文编号', width: 150 },
{ prop: 'productDesc', label: '产品描述', width: 150 },
{ prop: 'price', label: '指导价', width: 100 },
{ prop: 'status', label: '是否启用', width: 100 }
],
skuInfoDTOS: [
{
skuId: 2,
productNo: '10011',
productName: '测试产品1',
productDesc: '测试',
price: 12.1,
chType: 46,
status: 1,
skuAttrValueDTOS: [
{
attrId: 1,
attrName: '面值',
valueId: 1,
valueName: '5'
},
{
attrId: 2,
attrName: '运营商',
valueId: 3,
valueName: '移动'
},
{
attrId: 3,
attrName: '面包',
valueId: 3,
valueName: '喵宝值'
}
],
cardType: null,
skuInfo: null
},
{
skuId: 3,
productNo: '10012',
productName: '测试产品2',
productDesc: '测试',
price: 12.2,
chType: 46,
status: 1,
skuAttrValueDTOS: [
{
attrId: 1,
attrName: '面值',
valueId: 1,
valueName: '5'
},
{
attrId: 2,
attrName: '运营商',
valueId: 4,
valueName: '电信'
}
],
cardType: null,
skuInfo: null
},
{
skuId: 4,
productNo: '10013',
productName: '测试产品3',
productDesc: '测试',
price: 12.3,
chType: 46,
status: 1,
skuAttrValueDTOS: [
{
attrId: 1,
attrName: '面值',
valueId: 2,
valueName: '10'
},
{
attrId: 2,
attrName: '运营商',
valueId: 3,
valueName: '移动'
}
],
cardType: null,
skuInfo: null
},
{
skuId: 5,
productNo: '10014',
productName: '测试产品4',
productDesc: '测试',
price: 12.4,
chType: 46,
status: 1,
skuAttrValueDTOS: [
{
attrId: 1,
attrName: '面值',
valueId: 2,
valueName: '10'
},
{
attrId: 2,
attrName: '运营商',
valueId: 4,
valueName: '电信'
}
],
cardType: null,
skuInfo: null
}
]
}
},
created () {
this.processData()
},
methods: {
processData () {
const dynamicHeaders = {}
this.skuInfoDTOS.forEach(item => {
item.skuAttrValueDTOS.forEach(attr => {
if (!dynamicHeaders[attr.attrName]) {
dynamicHeaders[attr.attrName] = { prop: `attr_${attr.attrId}`, label: attr.attrName, width: 120 }
}
})
})
this.tableColumns = [
...Object.values(dynamicHeaders),
...this.tableColumns
]
this.tableData = this.skuInfoDTOS.map(item => {
const data = {
productNo: item.productNo,
productName: item.productName,
skuInfo: item.skuInfo,
productDesc: item.productDesc,
price: item.price,
status: item.status
}
item.skuAttrValueDTOS.forEach(attr => {
data[`attr_${attr.attrId}`] = attr.valueName
})
return data
})
}
}
}
</script>
<style scoped></style>