JavaScript数组处理--合并相同key的data值

 /***对象数组合并相同key的data
	* 参数:1.待操作数组
	2.参考key
	3.待合并key */

 mergeKeyArr(arr, key1, key2) {
     arr = this.sortArr(arr, true, 1, key1)
     let newArr = []
     let tempValue = 0 // 临时存储数据
     let curName = arr[0][key1]
     // 合并相同curName的数据
     arr.forEach((item, index) => {
         if (item[key1] === curName) {
             tempValue += item[key2]
         } else {
             let obj = {
                 ...arr[index - 1]
             }
             obj[key2] = tempValue
             newArr.push(obj)
             curName = item[key1]
             tempValue = item[key2]
         }
     })
     let obj = {
         ...arr[arr.length - 1]
     }
     obj[key2] = tempValue
     newArr.push(obj)
     return newArr
 }
在 Vue3 中,`el-table` 组件通常用于展示表格数据,而处理树形数组结构的合并表格通常是通过递归和深度优先搜索(Depth First Search, DFS)的方式实现。Vue 的响应式系统使得数据变化时表格能够自动更新。 假设你有这样一个树形数组: ```javascript [ { id: 1, children: [ { id: 11, name: 'Item 11' }, { id: 12, name: 'Item 12', children: [{ id: 121, name: 'Item 121' }] } ], name: 'Root Node' }, // 更多节点... ] ``` 你可以创建一个自定义组件 `TreeNode`,结合 `v-for` 和递归来渲染每个节点及其子节点,同时处理合并行的情况。例如,当遇到相同的父级 ID 时,可以将它们合并到一行显示。 以下是一个简单的示例代码片段: ```html <template> <el-table :data="treeData" border> <el-table-column prop="name" label="Name" /> <!-- 添加其他列... --> <el-table-column show-overflow-tooltip render="renderTreeRow" ></el-table-column> </el-table> </template> <script> export default { components: { TreeNode: () => import('./TreeNode.vue'), // 引入单独处理节点的组件 }, data() { return { treeData: [ ... // 初始化你的树形数据 ] }; }, methods: { renderTreeRow(h, { row }) { const treeNode = this.TreeNode(row); return h('div', {}, [treeNode]); } } }; </script> <!-- 树节点组件TreeNode.vue --> <template> <el-row v-if="row.children.length === 0"> <!-- 展示单个节点的信息 --> </el-row> <el-row v-else> <el-col :span="4">{{ row.name }}</el-col> <!-- 处理合并行,这里只展示一个例子 --> <el-col :span="8"> <ul> <li v-for="(child, index) in row.children" :key="child.id"> <TreeNode :item="child" /> <!-- 如果当前孩子和其他孩子的某个字段相等,就合并行 --> <span v-if="index !== 0 && shouldMerge(row, child)">...</span> </li> </ul> </el-col> </el-row> </template> <script> // 在 TreeNode 组件里添加判断是否需要合并行的函数 methods: { shouldMerge(parent, child) { // 这里可以根据需求编写条件,比如检查 name、id 等属性是否相同 return parent.name === child.name; } } </script> ```
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值