JS-根据条件计算table中某列的数量之和

6 篇文章 0 订阅
<script type="text/javascript">
var tbl = $("#TABLE_DL_fd_details");
tbl.on("change", "input[name$='iTVQuantity)']", function(e){
	var quantitySum1 = 0;
	var quantitySum2 = 0;
	$("#TABLE_DL_fd_details tr").each(function(){
		var type = $(this).find("td [name$='fdType)']").val();
		var num = $(this).find("td [name$='iTVQuantity)']").val();

		if(type==1){
			quantitySum1 += getNumValue(num);
		}else if(type==2){
			quantitySum2 += getNumValue(num);
		}
		console.log(getNumValue(quantitySum1)+"---"+getNumValue(quantitySum2));		
	});
		
});
function getNumValue(num) {
    if (!isNaN(num)) {
        num = parseFloat(num);
    }
    else {
        num = 0;
    }
        return num;
}
</script>

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
### 回答1: 可以在 el-table 的列配置添加一个计算合计的函数,并在模板使用该函数进行计算。 例如,在 data 定义一个计算总价的函数: ``` data() { return { totalPrice() { let total = 0; this.tableData.forEach(item => { total += item.price; }); return total; } } } ``` 然后在列配置加入计算合计的列: ``` <el-table :data="tableData"> <el-table-column label="商品名称" prop="name"></el-table-column> <el-table-column label="单价" prop="price"></el-table-column> <el-table-column label="总价" align="right">{{ totalPrice() }}</el-table-column> </el-table> ``` 在这种方式下,总价将会显示在表格最后一列。 ### 回答2: el-table 是 Element UI 一个常用的表格组件,我们可以通过它来展示数据,同时也支持添加合计列。 要加上合计列,我们首先需要在 el-table 定义需要展示数据的列。例如,我们有一张订单表格,包含商品名称、单价和数量等列,现在需要计算合计金额。我们可以定义一个新的列来展示合计金额,然后在这一列进行计算。 在 el-table ,我们可以使用 scoped slot 的方式来自定义每一列的内容。首先,我们可以使用 <template v-slot> 来指定每一列的内容,并使用 slot-scope 属性来获取当前行的数据。在我们的例子,我们需要获取每一行的单价和数量数据进行计算。 接下来,我们可以在相应的合计列的模板使用计算属性来计算合计金额。我们可以遍历所有行的数据,将每一行的单价乘以数量并累加起来得到合计金额。最后,将合计金额展示在合计列的位置。 总结起来,要在 el-table 加上合计列,你需要: 1. 在 el-table 定义需要展示数据的列; 2. 使用 scoped slot 的方式自定义每一列的内容; 3. 在合计列的模板使用计算属性进行合计金额的计算,并展示在相应位置。 这样,你就可以在 el-table 加上合计列,方便地查看数据的合计情况了。 ### 回答3: el-table 是基于 Element UI 的表格组件,在 Vue.js 的开发常用于展示数据。合计列是指在表格最后一行统计表格的数据。下面是在 el-table 添加合计列的步骤: 1. 首先,在 el-table 的模板添加一行用于显示合计的行,通常放在表格的最后一行。可以使用 `slot="append"` 来指定这一行是附加的,例如: ```html <el-table> <!-- 表格的内容 --> <template slot="append"> <!-- 合计行 --> </template> </el-table> ``` 2. 在合计行,使用 `el-table-column` 组件来定义每一列的合计值。可以通过设置 `show-summary` 属性为 `true` 来显示合计值。例如,对于一个数字类型的列,可以使用 `summary-method` 属性来指定计算合计值的方法。例如: ```html <el-table-column prop="sales" <!-- 假设这是一个销售额的列 --> label="销售额" :show-summary="true" :summary-method="sumSales" ></el-table-column> ``` 3. 在 Vue 组件的方法,定义 `sumSales` 方法用于计算合计值。例如: ```javascript methods: { sumSales(data) { if (data.length > 0) { // 计算合计值 return data.reduce((total, item) => total + item.sales, 0); } return 0; } } ``` 通过以上步骤,就可以在 el-table 添加合计列。合计列会在表格最后一行显示,每一列会根据定义的合计方法计算并显示对应的合计值。注意,合计行的合计值会根据表格的排序、筛选等操作实时更新。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

咏絮v

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值