vue中用js实现循环可编辑表格
最近项目中需要实现一个很复杂的表格，尝试用组件写，半天写不出来，循环真的好绕，最后直接求助大哥帮我用原生js写了一个。
大哥巴拉巴拉讲了半天，先这样在那样，问我懂了吗
我说懂了！
大哥说那你写吧我看着。
我打开vs table 停住。
大哥说 算了我来吧 你看着。
躺着真好家人们 我是废物。
表格的需求：
简单总结一下就是
1.表格需要动态，根据输入的数字显示列数
2.表格可编辑、可禁用、可计算
其实单纯表格可编辑是比较简单的，主要是根据输入的年份显示对应的内容，就需要对表格进行循环，我用组件循环的时候总是出现整行或者整列数据都一起变的情况，所以需要找到可以编辑单元格的方法。
经过测试发现这个表格，原来的大哥也是用js写的，并且写死了30年，你输入之后的年份，也只会出现30年的数据。所以我们直接跟他一样！
我们可以定义一个对象，之后不断地把内容添加进这个对象就可以。
首先在data中定义一个对象，即初始化的表格对象。
前两列的表格我们可以直接写死，从合计开始需要进行循环，所以我们直接从合计开始，合计下再分收入和支出，收入和支出的元素直接根据公式来（改成小写是因为后端接收数据不区分大小写，发大写没用）
还定义了当前年份count，属性名数组keys，和计算的几个公式。
data () {
return {
// 初始化的表格对象
tableData: {
"合计": {
'income': {
'a': 0.00,
'h': 0.00,
'i': 0.00,
'j': 0.00,
'k': 0.00,
'l': 0.00,
'm': 0.00,
'b': '--',
'n': '--',
'o': '--',
'p': '--',
'q': '--',
'c': 0.00,
'r': 0.00,
's': 0.00,
't': 0.00,
'd': '--',
'u': '--',
'v': '--',
'w': '--',
'x': '--',
'e': '--',
'f': '--'
},
'expend': {
'a': '--',
'h': '--',
'i': '--',
'j': '--',
'k': '--',
'l': '--',
'm': '--',
'b': 0.00,
'n': 0.00,
'o': 0.00,
'p': 0.00,
'q': 0.00,
'c': '--',
'r': '--',
's': '--',
't': '--',
'd': 0.00,
'u': 0.00,
'v': 0.00,
'w': 0.00,
'x': 0.00,
'e': 0.00,
'f': 0.00
}
},
},
// 表格对象属性名数组keys
keys: [],
// 填写的年份 默认显示五年
showYear: 5,
// 当前年度
count: new Date().getFullYear(),
// 收入keys a的计算
incomeKeys: ['h', 'i', 'k', 'l', 'm'],
// 支出keys b的计算
expendKeys: ['n', 'o', 'p', 'q'],
// 收入keys c的计算
incomeKeys2: ['r', 's', 't'],
// 支出keys d的计算
expendKeys2: ['u', 'v', 'w', 'x']
}
}然后在created中把年份加进去
created() {
// 在created元素周期就要生成表格
let tempAttr = null
// 往tabledata里循环添加30年的数据
for (let i = 0; i < 30; i++) {
tempAttr = this.count + i + ''
this.tableData[tempAttr] = {
'income': {
'a': 0.00,
'h': 0.00,
'i': 0.00,
'j': 0.00,
'k': 0.00,
'l': 0.00,
'm': 0.00,
'b': '--',
'n': '--',
'o': '--',
'p': '--',
'q': '--',
'c': 0.00,
'r': 0.00,
's': 0.00,
't': 0.00,
'd': '--',
'u': '--',
'v': '--',
'w': '--',
'x': '--',
'e': '--',
'f': '--'
},
'expend': {
'a': '--',
'h': '--',
'i': '--',
'j': '--',
'k': '--',
'l': '--',
'm': '--',
'b': 0.00,
'n': 0.00,
'o': 0.00,
'p': 0.00,
'q': 0.00,
'c': '--',
'r': '--',
's': '--',
't': '--',
'd': 0.00,
'u': 0.00,
'v': 0.00,
'w': 0.00,
'x': 0.00,
'e': 0.00,
'f': 0.00
},
// 把年份传给后端 object.values只会获取属性值,所以多加一个year属性
'year' : tempAttr
}
}
// Object.keys获取对象的属性名赋值给keys
this.keys = Object.keys(this.tableData)
},到这里我们表格就循环好了，接下来画表格
收支类别
公式
合计
{{ keys[index - 1] + '年' }}
{{ index % 2 == 0 ? '支出' : '收入' }}
一、建设资金来源
A=H+I+K+L+M
（一）财政安排资金
H
（二）地方政府专项债券
I
其中：用于资本金
J
（三）项目单位市场化融资
K
（四）单位自筹资金
L
（五）其他资金
M
二、项目建设支出
B=N+O+P+Q
（一）项目建设成本（不含财务费用）
N
（二）财务费用-专项债券付息
O
（三）财务费用-市场化融资付息
P
（四）其他建设支出
Q
三、项目运营预期收入
C=R+S+T
（一）财政补贴收入
R
（二）项目自身经营收入
S
（三）其他收入
T
四、项目运营支出
D=U+V+W+X
（一）项目运营成本（不含财务费用）
U
（二）财务费用-专项债券付息
V
（三）财务费用-市场化融资付息
W
（四）其他运营支出
X
五、专项债券还本
E
六、市场化融资还本
F
计算方法写在mounted中，这里本来是打算使用watch进行监听的，结果计算出来太慢了，所以就只能直接修改dom节点了。获取所有的compute类进行操作。（本来是直接获取inout框，后来发现这样的话上面的input框也会变化，就加了类）
mounted() {
this.getMajorProject()
// 获取所有class为compute的dom元素节点 遍历监听change事件 当焦点消失的时候数据变化
document.querySelectorAll('.compute').forEach(target => {
target.addEventListener('change', () => {
//年份计算
// A=H+I+K+L+M
for (let i = 0; i < this.showYear; i++) {
this.tableData[this.count + i + ''].income.a=0;
for (let j = 0; j < this.incomeKeys.length; j++) {
console.log(this.incomeKeys[j]+this.tableData[this.count + i + ''].income[this.incomeKeys[j]])
// parseFloat解析字符串返回浮点值
this.tableData[this.count + i + ''].income.a += parseFloat(this.tableData[this.count + i + ''].income[this.incomeKeys[j]])
}
}
// B=N+O+P+Q
for (let i = 0; i < this.showYear; i++) {
this.tableData[this.count + i + ''].expend.b=0;
for (let j = 0; j < this.expendKeys.length; j++) {
console.log(this.expendKeys[j]+this.tableData[this.count + i + ''].expend[this.expendKeys[j]])
this.tableData[this.count + i + ''].expend.b += parseFloat(this.tableData[this.count + i + ''].expend[this.expendKeys[j]])
}
}
// C=R+S+T
for (let i = 0; i < this.showYear; i++) {
this.tableData[this.count + i + ''].income.c=0;
for (let j = 0; j < this.incomeKeys2.length; j++) {
console.log(this.incomeKeys2[j]+this.tableData[this.count + i + ''].income[this.incomeKeys2[j]])
this.tableData[this.count + i + ''].income.c += parseFloat(this.tableData[this.count + i + ''].income[this.incomeKeys2[j]])
}
}
// D=U+V+W+X
for (let i = 0; i < this.showYear; i++) {
this.tableData[this.count + i + ''].expend.d=0;
for (let j = 0; j < this.expendKeys2.length; j++) {
console.log(this.expendKeys2[j]+this.tableData[this.count + i + ''].expend[this.expendKeys2[j]])
this.tableData[this.count + i + ''].expend.d += parseFloat(this.tableData[this.count + i + ''].expend[this.expendKeys2[j]])
}
}
//合计计算
// 先置空
this.tableData['合计'].income.a = 0;
this.tableData['合计'].income.h = 0;
this.tableData['合计'].income.i = 0;
this.tableData['合计'].income.j = 0;
this.tableData['合计'].income.k = 0;
this.tableData['合计'].income.l = 0;
this.tableData['合计'].income.m = 0;
this.tableData['合计'].expend.b = 0;
this.tableData['合计'].expend.n = 0;
this.tableData['合计'].expend.o = 0;
this.tableData['合计'].expend.p = 0;
this.tableData['合计'].expend.q = 0;
this.tableData['合计'].income.c = 0;
this.tableData['合计'].income.r = 0;
this.tableData['合计'].income.s = 0;
this.tableData['合计'].income.t = 0;
this.tableData['合计'].expend.d = 0;
this.tableData['合计'].expend.u = 0;
this.tableData['合计'].expend.v = 0;
this.tableData['合计'].expend.w = 0;
this.tableData['合计'].expend.x = 0;
this.tableData['合计'].expend.e = 0;
this.tableData['合计'].expend.f = 0;
for (let i = 0; i < this.showYear; i++) {
this.tableData['合计'].income.a += parseFloat(this.tableData[this.count + i + ''].income.a);
this.tableData['合计'].income.h += parseFloat(this.tableData[this.count + i + ''].income.h);
this.tableData['合计'].income.i += parseFloat(this.tableData[this.count + i + ''].income.i);
this.tableData['合计'].income.j += parseFloat(this.tableData[this.count + i + ''].income.j);
this.tableData['合计'].income.k += parseFloat(this.tableData[this.count + i + ''].income.k);
this.tableData['合计'].income.l += parseFloat(this.tableData[this.count + i + ''].income.l);
this.tableData['合计'].income.m += parseFloat(this.tableData[this.count + i + ''].income.m);
this.tableData['合计'].expend.b += parseFloat(this.tableData[this.count + i + ''].expend.b);
this.tableData['合计'].expend.n += parseFloat(this.tableData[this.count + i + ''].expend.n);
this.tableData['合计'].expend.o += parseFloat(this.tableData[this.count + i + ''].expend.o);
this.tableData['合计'].expend.p += parseFloat(this.tableData[this.count + i + ''].expend.p);
this.tableData['合计'].expend.q += parseFloat(this.tableData[this.count + i + ''].expend.q);
this.tableData['合计'].income.c += parseFloat(this.tableData[this.count + i + ''].income.c);
this.tableData['合计'].income.r += parseFloat(this.tableData[this.count + i + ''].income.r);
this.tableData['合计'].income.s += parseFloat(this.tableData[this.count + i + ''].income.s);
this.tableData['合计'].income.t += parseFloat(this.tableData[this.count + i + ''].income.t);
this.tableData['合计'].expend.d += parseFloat(this.tableData[this.count + i + ''].expend.d);
this.tableData['合计'].expend.u += parseFloat(this.tableData[this.count + i + ''].expend.u);
this.tableData['合计'].expend.v += parseFloat(this.tableData[this.count + i + ''].expend.v);
this.tableData['合计'].expend.w += parseFloat(this.tableData[this.count + i + ''].expend.w);
this.tableData['合计'].expend.x += parseFloat(this.tableData[this.count + i + ''].expend.x);
this.tableData['合计'].expend.e += parseFloat(this.tableData[this.count + i + ''].expend.e);
this.tableData['合计'].expend.f += parseFloat(this.tableData[this.count + i + ''].expend.f);
}
// 强刷
this.$forceUpdate()
})
})
},可编辑的表格就实现了，我们还需要控制表格只能输入数字，这个功能大哥当然是让我自己做，但我项目要的太急还没来得及做，之后有时间实现一下校验的功能。
接下来是要根据输入的项目年限（图片上写错了）显示对应的列数。其实说是项目年限，其实项目年限是不能填的，项目年限是建设年限和预算年限的合计。
所以很简单，我们监听一下建设年限和预算年限，做个加法就行。但是问题又来了，项目是用jeecg写的，v-decorator好像不支持监听，我写了没反应，也可能是我不会。那就直接写change事件。
得到项目期限之后，需要表格跟着变化，其实就把项目期限的值赋给showYear就行。但是可能是因为有了change事件，项目期限不能再写了，所以最后就直接写在建设和预算的change事件里了。
还有一个注意点是需要使用数字输入框，这样value才是一个值，直接input，每变化一次，内容都会变化。输入10会被当成1和0。
// 建设年限变化
changeJsNum (value) {
// 将值赋给建设年限
if(value === '' || value === null) {
this.constructionPeriod = 0
} else{
this.constructionPeriod = value
}
// 根据预算年限进行项目年限的计算 parseInt:字符串转数字
if(this.operatingPeriod === ''){
this.projectPeriod = parseInt(this.constructionPeriod)
} else {
this.projectPeriod = parseInt(this.constructionPeriod) + parseInt(this.operatingPeriod)
}
// 计算之后 建设或预算年限的value置空（导致项目年限为空）时，项目年限会为字符串0，所以if判断要加上这个
if(this.projectPeriod && this.projectPeriod!='0'){
this.showYear = this.projectPeriod
} else {
this.showYear = 5
}
},
changeYyNum (value) {
if(value === ''|| value === null) {
this.operatingPeriod = 0
} else{
this.operatingPeriod = value
}
if(this.constructionPeriod === ''){
this.projectPeriod = parseInt(this.operatingPeriod)
} else {
this.projectPeriod = parseInt(this.operatingPeriod) + parseInt(this.constructionPeriod)
}
if(this.projectPeriod && this.projectPeriod!='0'){
this.showYear = this.projectPeriod
} else {
this.showYear = 5
}
},最后给大家看看我的表格！
项目年限变化，列数变化。
