前言:
要做表头拖拽功能,用的sortablejs,拖拽完成之后需要把当前 拖拽的表头动态的给后端组装过去格式如下:
{
"headerMap":{
//最外层 tjDate就是当前表头字段 index 就是表头所在位置从0开始 values 父表头名 子表头名,没有子表头时 只放父表头名字
"tjDate":{
"index":0,
"values":[
"时间"
]
},
"gyts":{
"index":1,
"values":[
"供应信息",
"供应套数"
]
},
"gymj":{
"index":2,
"values":[
"供应信息",
"供应面积(㎡)"
]
},
"ysts":{
"index":3,
"values":[
"预测成交信息",
"预测成交套数"
]
},
"ysmj":{
"index":4,
"values":[
"预测成交信息",
"预测面积(㎡)"
]
},
"yszj":{
"index":5,
"values":[
"预测成交信息",
"预测成交金额(万元)"
]
},
"ysjj":{
"index":6,
"values":[
"预测成交信息",
"预测成交均价"
]
},
"clts":{
"index":7,
"values":[
"存量信息",
"存量套数"
]
},
"clmj":{
"index":8,
"values":[
"存量信息",
"存量面积(㎡)"
]
},
"xzxclts":{
"index":9,
"values":[
"存量信息",
"限制性套数"
]
},
"xzxclmj":{
"index":10,
"values":[
"存量信息",
"限制性面积(㎡)"
]
}
}
}
组装表格代码:
/**
* 组装表格数据
*/
loadTableData(){
let tableHeader = []
const headerMap = new Map();
const headerMaps ={}
//所有表格数据 $refs对应的表头
tableHeader = this.$refs['multipleTable'].store.states._columns
//console.log('获取当前表格的表头集合tableHeader===' + JSON.stringify(tableHeader))
if (tableHeader && tableHeader.length > 0) {
let tableHeaderIndex =0
//递归出需要的表头数据 放进新数组里
tableHeader.forEach((column, _index) =>{
//剔除序号
if(column.label && column.label!='序号'){
//多级表头组装
if(column.children && column.children.length >0){
column.children.forEach((zcolumn, zindex) =>{
headerMap.set(zcolumn.property, {"index": tableHeaderIndex , "values":[column.label, zcolumn.label]}) // 添加新的key-value
tableHeaderIndex ++
})
}else{
headerMap.set(column.property, {"index": tableHeaderIndex , "values":[column.label]}) // 添加新的key-value
tableHeaderIndex ++
}
}
})
this.headerMap =this.strMapToObj(headerMap)
}
},
/**
*map字符串转换为map对象
*/
strMapToObj(strMap){
let obj= Object.create(null);
for (let[k,v] of strMap) {
obj[k] = v;
}
return obj;
}