table多行表头合并 vue_vue.j后端返回数据动态合并生成动态table表头

:data="tableData.list"

border

class="table"

:header-cell-style="{background:'#eef1f6',color:'#606266'}"

>

v-for="col in list_name"

:key="col"

:prop="col"

:label="col"

min-width="240"

>

getData(paylod) {

let that = this;

this.table_loading = true;

$http

.post(

$http.api.get_all_rpx_fee_calc_list + "?token=" + this.token,

paylod

)

.then(res => {

if (res.code == 0) {

// 遍历回去的数组将要用到的条件存入到对应的数组当中

res.data.forEach(element => {

this.list_name.push(element.colname);

this.quantity_level.push(element.description);

this.list_type.push(element.type);

});

//对已经存入数据的三个数组进行去重处理，然后在重新赋值给这三个数组

let a = new Set(this.list_name);

let b = new Set(this.quantity_level);

let c = new Set(this.list_type);

this.list_name = Array.from(a);

this.quantity_level = Array.from(b);

this.list_type = Array.from(c);

// 对获取的数组进行遍历，对已经处理好的名称数组进行遍历，在将名称数组中的每个元素作为Key值，把获取数组中的每个对象的价格赋值给对应的key值

res.data.forEach((item, index) => {

that.list_name.forEach(name => {

item[name] = item.price;

});

// 如果获取数组的下标为0，就把对应的该对象push到已经声明的该数组中然后return

if (index == 0) {

that.list_row.push(item);

return;

}

//声明一个标志位，然后遍历该数组，在用该数组中的相关属性和获取数据源的相关的相同key的属性做比较，如果相等就把标志位置为true

let isd = false;

that.list_row.forEach(a => {

if (

a.quantity_level == item.quantity_level &&

a.type == item.type

) {

isd = true;

}

});

// 如果标志位为true就把数据源的相关对象push到已经定义好的all_row数组，否则push到list_row数组

if (isd == true) {

that.all_row.push(item);

} else {

that.list_row.push(item);

}

});

//然后遍历list_row数组，遍历all_row数组分别比较他们里面的相关属性，如果满足的的情况下载遍历已经处理好的表头名称数组然后和装有全部数组的all_row比较，如果相同就把表头名称数组list_name中的相关属性作为list_row属性key，在将相关的price金额赋值给list_row对应的属性key

that.list_row.forEach(a => {

that.all_row.forEach(b => {

if (b.type == a.type && b.quantity_level == a.quantity_level) {

that.list_name.forEach(n => {

if (b.colname == n) {

a[n] = b.price;

}

});

}

});

});

this.tableData.list = that.list_row;

this.table_loading = false;

}

});

},