html表格填数字自动求和,vue原生table表格,输入数值求和
标签:
实现的是用vue项目实现原生的table求一列的数值总和,其中数值是后期通过input输入的
html代码
ID名称数学物理英语手动打分
{{item.id}}{{item.name}}{{item.amount1}}{{item.amount2}}总计N/A{{sumAmount}}{{sumMoney}}
{{sunCount}}
没放样式代码了, 这里只实现功能
js代码
var Main = {
data() {
return {
tableData6: [{
id: '12987122',
name: '王小虎111',
amount1: '234',
amount2: '3.2',
amount3: 10,
amount4: ''
}, {
id: '12987123',
name: '王小虎222',
amount1: '165',
amount2: '4.43',
amount3: 12,
amount4: ''
}, {
id: '12987124',
name: '王小虎333',
amount1: '324',
amount2: '1.9',
amount3: 9,
amount4: ''
}, {
id: '12987125',
name: '王小虎444',
amount1: '621',
amount2: '2.2',
amount3: 17,
amount4: ''
}, {
id: '12987126',
name: '王小虎555',
amount1: '539',
amount2: '4.1',
amount3: 15,
amount4: ''
}],
};
},
computed: {
sumAmount() {
return this.tableData6.map(row => row.amount1).reduce((acc, cur) => (parseInt(cur) + acc), 0)
},
sumMoney() {
return this.tableData6.map(row => row.amount2).reduce((acc, cur) => (parseFloat(cur) + acc), 0)
},
// 方法一:计算属性
sunCount() {
console.log('this.tableData6.map(row => row.amount4)', this.tableData6.map(row => row.amount4))
var bb = [];
for(var i in this.tableData6.map(row => row.amount4)){
if(this.tableData6.map(row => row.amount4)[i]) {
bb.push(this.tableData6.map(row => row.amount4)[i])
}
}
return bb.reduce((acc, cur) => (parseFloat(cur) + acc), 0)
// return this.tableData6.map(row => row.amount4).reduce((acc, cur) => (parseFloat(cur) + acc), 0)
// let num = 0
// for( let i = 0 ; i < this.tableData6.length ; i++) {
// num += Number(this.tableData6[i].amount4)
// }
// return num
}
},
methods: {
// 方法二: 通过change事件实现
// blurInput(index) {
// console.log('index', this.tableData6)
// let num = 0;
// this.tableData6[index].amount4 = number
// for( let i = 0 ; i < this.tableData6.length ; i++) {
// num += Number(this.tableData6[i].amount4)
// }
// this.englishAllNum = num
// },
}
};
var Ctor = Vue.extend(Main)
new Ctor().$mount('#app')
标签:
来源: https://www.cnblogs.com/lxk0301/p/10161359.html
html表格填数字自动求和,vue原生table表格,输入数值求和相关推荐
- vue原生table合并单元格
vue原生table合并单元格 <table border="1"><thead><tr><th>学习</th>< ...
- Vue+ElementUI table表格分页
Vue+ElementUI table表格分页 分页的两种方式.前端分页,后端分页.两种方式各有个的优缺点吧. 前端分页:后台只需将数据返回,不需要做过多处理,前端一次请求拿到所有数据后做分页处理.但 ...
- vue中table表格导出为图片格式
vue中table表格点击下载为图片格式 实现思路:给页面中需要导出为图片的内容添加id名,调用封好的方法即可直接导出.以下是具体的实现方法 1.安装依赖 npm install --save htm ...
- vue之table表格的合并
目录 vue之table表格的动态合并 vue之table表格的动态合并 后台给数据 处理断层 vue之table表格的动态合并 后台给数据 前端处理断层 根据后台数据合并前三列数据 vue之tabl ...
- html增删改后让table自动刷新,vue如何实现表格增删改查效果
vue如何实现表格增删改查效果 发布时间:2021-04-23 14:34:54 来源:亿速云 阅读:90 作者:小新 小编给大家分享一下vue如何实现表格增删改查效果,相信大部分人都还不怎么了解,因 ...
- php表格填序号的代码怎么写,word表格如何实现序号自动填充修改不了
word表格如何实现序号自动填充修改不了? 在word表格中自动填充自定义序号的方法 打开一个需要自动填充自定义序号的表格. 选中要进行自动填充自定义序号的单元格. 选择"开始"菜 ...
- vue vue的table表格自适应_响应式表格,HTML表格自适应(responsive table)
简单自适应表格 前面的一篇文章里面我介绍到了一种简单的自适应表格制作方案,就是通过给表格的外面加了一个.table-container的标签 .table-container { width: 100 ...
- CSS设置原生table表格边框样式(添加表格横线)(附最后表格td画斜线)
table表格边框样式: 推荐这种 原理: 只对table td设置左与上边框: 对table设置右与下边框: <style> .table-c table{border-right:1p ...
- vue+ iview Table表格插入图片显示不同状态
最近做的项目需求是表格里需要用图片提示下当前数据的状态 选中的及是用的图片做的,红色的是gif图灰色的即是另外一种状态.实现方法: 主要是iview Table表格里的render函数处理的,上可视 ...
最新文章
- jieba.lcut方法
- 【学习笔记】HTTP通讯基础
- ClientDataSet建立索引和排序
- Maven学习笔记(2) --mvn archetype:create 说明
- amd cpu不能在cmd环境下运行java代码_如何在Windows10中配置java的JDK环境
- ie6下 jsonp无响应的问题
- 数据结构与算法(python版)
- 医学图像加密算法研究_项目笔记
- 基于dsp语音降噪算法c语言,基于DSP的语音降噪实时实现.PDF
- 洛谷 P5708 【深基2.习2】三角形面积
- CodeVS 1359 数字计数 51nod 1042 数字0-9的数量 Pascal
- 方舟官方服务器怎么不显示伤害,方舟生存进化官服怎么显示伤害
- 使用Jekyll搭建免费的个人博客详细教程
- Tomcat下载以及IDEA配置Tomcat
- centos 安装gstreamer_64位CentOS系统中安装32位开发库
- PC usb蓝牙发射器
- 双十一生活必买清单,经常失眠人士助眠好物推荐
- 【技术栈——00061】搭建关于python项目docker镜像的Dockerfile文件示例(自己的)
- 全国专业技术人员计算机应用能力考试 excel2003 注册码,全国专业技术人员计算机应用能力考试Excel2003题库版...
- Transactional(事务)
热门文章
- 41_引用类型用法总结
- 用C++写一个《炸飞机》/《死亡轰炸》游戏辅助程序
- ps排版html,PS冷门技!十个不为人知的PS文本排版工具
- Photoshop图像处理专家
- el-table表头换行、el-table-column单元格换行
- 计算机居中试题,计算机基础实操试题.doc
- 微信公众号每天定时给女友发送天气信息--0基础学会
- c语言头文件可以定义全局变量,C语言在头文件中定义全局变量
- html5怎么把div做成椭圆,如何在html5画布中绘制椭圆形?
- VPS2103 电流模式 PWM 控制器 4-50V IN /90V/0.1Ω功率管