层级方法实现table表格某项自动求和

本文介绍了一种不同于watch的高效方法,用于实现Vue.js表格中层级结构数据的自动求和。博客中提到,原先的watch方法代码复杂且性能低下,新的方法能更有效地计算每个小分类及大分类的总计,并提供了实现此类功能的基本思路。
摘要由CSDN通过智能技术生成

上一篇博客说到:table表格内不同项的层级求和,上一篇用的是watch的方法,这个方法代码繁琐,十分消耗性能,今天用一种全新的方法来解决这个问题:
simon
我这边呢是有多个大分类,分类1 分类2 分类3,然后每个分类下又有小分类,需要统计每个小分类的总额,然后统计每个大分类的总额,放到合计里面去!(这个根据个人的业务代码需求肯定是不一样的,大家根据自己需求进行更改,我这边只写自己的)

		/**
         * 修改单元格自动计算父级值
         */
        makeDataRelation(){
        //行号
            let column = this.selectedCell.columnIndex;
            //第几列
            let thisLv = this.tableData[this.selectedCell.rowIndex].computeLevel;
            //列号
            let thisRowIndex = this.selectedCell.rowIndex;
            //小分类
            if(thisLv > 1){
                this.computeParentValue(thisRowIndex,thisLv)
            }
            //大分类求和
            if(thisLv > 0){
                this.tableData[27][column] =this.tableData[0][column] + this.tableData[5][column] + this.tableData[6][column] + this.tableData[26][column]
   
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Vue实现两个不同table层级关联可以通过以下步骤实现: 1. 在Vue的data中定义两个table对应的数据源,分别为table1Data和table2Data。 2. 在Vue的methods中定义一个方法,用于处理层级关联逻辑。例如,可以定义一个方法名为handleLevelRelation的方法。 3. 在handleLevelRelation方法中,可以通过遍历table1Data的每个数据项,然后根据当前数据项的某个字段值,在table2Data中筛选出对应的子级数据项。可以使用Array的filter方法实现这个筛选功能。 4. 在Vue的template中,使用v-for指令来循环渲染table1Data的每个数据项,然后在循环内部再使用嵌套的v-for指令来渲染对应的子级数据项。 5. 在嵌套的v-for指令中,使用v-if指令来判断当前数据项是否符合关联条件,如果符合则渲染对应的子级数据项。 以下是一个示例代码: ```html <template> <div> <table> <tr v-for="item1 in table1Data" :key="item1.id"> <td>{{ item1.name }}</td> <td> <table> <tr v-for="item2 in getChildren(item1.id)" :key="item2.id"> <td>{{ item2.name }}</td> </tr> </table> </td> </tr> </table> </div> </template> <script> export default { data() { return { table1Data: [ { id: 1, name: 'A' }, { id: 2, name: 'B' }, // ... ], table2Data: [ { id: 1, name: 'A-1', parentId: 1 }, { id: 2, name: 'A-2', parentId: 1 }, // ... { id: 11, name: 'B-1', parentId: 2 }, { id: 12, name: 'B-2', parentId: 2 }, // ... ] }; }, methods: { getChildren(parentId) { return this.table2Data.filter(item => item.parentId === parentId); } } }; </script> ``` 以上是一个简单的示例,使用Vue的v-for指令和v-if指令实现了两个不同table层级关联。在实际开发中,可以根据具体需求进行适当的修改和扩展。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值