2023.2.7今天我学习了如何使用el-table实现两个表格之间的关联连接。
首先什么是关联关系:
left join(左联接) 返回包括左表中的所有记录和右表中联结字段相等的记录
right join(右联接) 返回包括右表中的所有记录和左表中联结字段相等的记录
inner join(等值连接) 只返回两个表中联结字段相等的行
效果:
表一:
表二:
连接的新表一:
我们可以看到相同的键名是【ccc】,对应的相同的值是【33】和【66】。然后相关的数据就会被关联起来,没有相关的数据就会Push到新的一行。
为了防止其他键名出现重复,需要把通用的键名删除,如(id,time等),只留下字段名就好,如(col_a,col_b,col_c)。
js删除不需要的键名代码如下:
// 去掉原表格数据不需要的字段
const data_List = this.dataList.map((item, index, arr) => {
delete item.id
delete item.created_at
delete item.updated_at
delete item.version
})
// 去掉添加数据不需要的字段
const add_data_List = remarkName.map((item, index, arr) => {
delete item.id
delete item.created_at
delete item.updated_at
delete item.version
})
js代码如下:
const demo = (arr1, arr2) => {
const res = []
// 扩展数组
const arr = [...arr1, ...arr2]
// 合并数组获取所有的keys
const keys = Object.keys(Object.assign({}, ...arr))
// 创建一个基础的数据展示
const base = keys.reduce((r, k) => {
r[k] = undefined
return r
}, {})
// 通过key 转化为map映射
const keyMap = keys.reduce((map, cur) => {
map[cur] = {}
return map
}, {})
arr.forEach(item => {
// 获取当前对象的键值对数组
const itemArr = Object.entries(item)
// 查找是否在映射中出现
const keyVal = itemArr.find(([k, v]) => keyMap[k][v])
if (keyVal) {
// 如果在映射中出现 那么通过路径进行合并
const [key, value] = keyVal
Object.assign(keyMap[key][value], item)
} else {
// 如果没出现那就创建一个全新的数据
const data = { ...base, ...item }
res.push(data)
itemArr.forEach(([k, v]) => keyMap[k][v] = data)
}
})
return res
}
let newData = demo(this.dataList,remarkName)