el-table实现两个表格的关联连接（类似数据库的左连接关系）

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)