vue中用js如何實現(xiàn)循環(huán)可編輯表格
更新時間：2022年09月09日 10:13:52 作者：芝士焗紅薯
這篇文章主要介紹了vue中用js如何實現(xiàn)循環(huán)可編輯表格，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教
vue用js實現(xiàn)循環(huán)可編輯表格
最近項目中需要實現(xiàn)一個很復雜的表格，嘗試用組件寫，半天寫不出來，循環(huán)真的好繞，最后直接求助大哥幫我用原生js寫了一個。
大哥巴拉巴拉講了半天，先這樣在那樣，問我懂了嗎
我說懂了！
大哥說那你寫吧我看著。
我打開vs table 停住。
大哥說 算了我來吧 你看著。
躺著真好家人們 我是廢物。
表格的需求
簡單總結一下就是
1.表格需要動態(tài)，根據(jù)輸入的數(shù)字顯示列數(shù)
2.表格可編輯、可禁用、可計算
其實單純表格可編輯是比較簡單的，主要是根據(jù)輸入的年份顯示對應的內(nèi)容，就需要對表格進行循環(huán)，我用組件循環(huán)的時候總是出現(xiàn)整行或者整列數(shù)據(jù)都一起變的情況，所以需要找到可以編輯單元格的方法。
經(jīng)過測試發(fā)現(xiàn)這個表格，原來的大哥也是用js寫的，并且寫死了30年，你輸入之后的年份，也只會出現(xiàn)30年的數(shù)據(jù)。所以我們直接跟他一樣！
我們可以定義一個對象，之后不斷地把內(nèi)容添加進這個對象就可以。
首先在data中定義一個對象，即初始化的表格對象。
前兩列的表格我們可以直接寫死，從合計開始需要進行循環(huán)，所以我們直接從合計開始，合計下再分收入和支出，收入和支出的元素直接根據(jù)公式來（改成小寫是因為后端接收數(shù)據(jù)不區(qū)分大小寫，發(fā)大寫沒用）
還定義了當前年份count，屬性名數(shù)組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
}
},
},
// 表格對象屬性名數(shù)組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里循環(huán)添加30年的數(shù)據(jù)
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)
},到這里我們表格就循環(huán)好了，接下來畫表格
<div style="overflowX:scroll; overflowY: scroll;height:350px;">
<!-- 自定義一個table 實現(xiàn)表格可編輯、表頭可根據(jù)選擇的年份變化-->
<table ref="table">
<!-- 表頭 -->
<tr class="table-th">
<td colspan="4" style="width:420px;" rowspan="2">收支類別</td>
<td colspan="2" style="width:200px;" rowspan="2">公式</td>
<td colspan="2">合計</td>
<!-- 循環(huán)表頭年份 index從1開始 showYear:選擇的年份 keys:所有年份 -->
<td v-for="index of showYear" :key="index" colspan="2">{{ keys[index - 1] + '年' }}</td>
</tr>
<tr class="table-th">
<!-- 循環(huán)收入和支出 從合計開始所以要showYear+1 收入在前支出在后 -->
<td v-for="index in (showYear+1)*2" :key="index">{{ index % 2 == 0 ? '支出' : '收入' }}</td>
</tr>
<!-- 一、建設資金來源 -->
<tr>
<td class="table-th" colspan="4">一、建設資金來源</td>
<td class="table-th" colspan="2">A=H+I+K+L+M</td>
<td>
<!-- 合計的收入計算自動生成 根據(jù)class進行dom節(jié)點計算-->
<input class="compute" disabled style="width: 100%; outline: none; border: none;" type="text"
v-model="tableData['合計'].income.a">
</td>
<td>
<input class="compute" disabled style="width: 100%;outline: none;border: none;" type="text"
v-model="tableData['合計'].expend.a">
</td>
<!-- 循環(huán)年份 收入支出所以showYear*2 收入和支出的合計也計算自動生成 count:當前年度 math.floor:向下取整-->
<td v-for="index in showYear*2" :key="index">
<input class="compute" disabled v-if="(index-1)%2" style="width: 100%; outline: none; border: none;" type="text"
v-model="tableData[count+ Math.floor((index-1)/2) +''].expend.a">
<input class="compute" disabled v-else style="width: 100%; outline: none; border: none;" type="text"
v-model="tableData[count+ Math.floor((index-1)/2) +''].income.a">
</td>
</tr>
<!-- （一）財政安排資金 -->
<tr>
<td class="table-th" colspan="4">（一）財政安排資金</td>
<td class="table-th" colspan="2">H</td>
<td>
<input class="compute" disabled style="width: 100%; outline: none; border: none;" type="text" v-model="tableData['合計'].income.h">
</td>
<td>
<input class="compute" disabled style="width: 100%; outline: none; border: none;" type="text" v-model="tableData['合計'].expend.h">
</td>
<td v-for="index in showYear*2" :key="index">
<input class="compute" disabled v-if="(index-1)%2" style="width: 100%; outline: none; border: none;" type="text"
v-model="tableData[count+ Math.floor((index-1)/2) +''].expend.h">
<input class="compute" v-else style="width: 100%; outline: none; border: none;" type="text"
v-model="tableData[count+ Math.floor((index-1)/2) +''].income.h">
</td>
</tr>
<!-- （二）地方政府專項債券 -->
<tr>
<td class="table-th" colspan="4">（二）地方政府專項債券</td>
<td class="table-th" colspan="2">I</td>
<td>
<input class="compute" disabled style="width: 100%;outline: none;border: none;" type="text" v-model="tableData['合計'].income.i">
</td>
<td>
<input class="compute" disabled style="width: 100%;outline: none;border: none;" type="text" v-model="tableData['合計'].expend.i">
</td>
<td v-for="index in showYear*2" :key="index">
<input class="compute" disabled v-if="(index-1)%2" style="width: 100%;outline: none;border: none;" type="text"
v-model="tableData[count+ Math.floor((index-1)/2) +''].expend.i">
<input class="compute" v-else style="width: 100%;outline: none;border: none;" type="text"
v-model="tableData[count+ Math.floor((index-1)/2) +''].income.i">
</td>
</tr>
<!-- 其中：用于資本金 -->
<tr>
<td class="table-th" colspan="4">其中：用于資本金</td>
<td class="table-th" colspan="2">J</td>
<td>
<input class="compute" disabled style="width: 100%;outline: none;border: none;" type="text" v-model="tableData['合計'].income.j">
</td>
<td>
<input class="compute" disabled style="width: 100%;outline: none;border: none;" type="text" v-model="tableData['合計'].expend.j">
</td>
<td v-for="index in showYear*2" :key="index">
<input class="compute" disabled v-if="(index-1)%2" style="width: 100%;outline: none;border: none;" type="text"
v-model="tableData[count+ Math.floor((index-1)/2) +''].expend.j">
<input class="compute" v-else style="width: 100%;outline: none;border: none;" type="text"
v-model="tableData[count+ Math.floor((index-1)/2) +''].income.j">
</td>
</tr>
<!-- （三）項目單位市場化融資 -->
<tr>
<td class="table-th" colspan="4">（三）項目單位市場化融資</td>
<td class="table-th" colspan="2">K</td>
<td>
<input class="compute" disabled style="width: 100%;outline: none;border: none;" type="text" v-model="tableData['合計'].income.k">
</td>
<td>
<input class="compute" disabled style="width: 100%;outline: none;border: none;" type="text" v-model="tableData['合計'].expend.k">
</td>
<td v-for="index in showYear*2" :key="index">
<input class="compute" disabled v-if="(index-1)%2" style="width: 100%;outline: none;border: none;" type="text"
v-model="tableData[count+ Math.floor((index-1)/2) +''].expend.k">
<input class="compute" v-else style="width: 100%;outline: none;border: none;" type="text"
v-model="tableData[count+ Math.floor((index-1)/2) +''].income.k">
</td>
</tr>
<!-- （四）單位自籌資金 -->
<tr>
<td class="table-th" colspan="4">（四）單位自籌資金</td>
<td class="table-th" colspan="2">L</td>
<td>
<input class="compute" disabled style="width: 100%;outline: none;border: none;" type="text" v-model="tableData['合計'].income.l">
</td>
<td>
<input class="compute" disabled style="width: 100%;outline: none;border: none;" type="text" v-model="tableData['合計'].expend.l">
</td>
<td v-for="index in showYear*2" :key="index">
<input class="compute" disabled v-if="(index-1)%2" style="width: 100%;outline: none;border: none;" type="text"
v-model="tableData[count+ Math.floor((index-1)/2) +''].expend.l">
<input class="compute" v-else style="width: 100%;outline: none;border: none;" type="text"
v-model="tableData[count+ Math.floor((index-1)/2) +''].income.l">
</td>
</tr>
<!--（五）其他資金 -->
<tr>
<td class="table-th" colspan="4">（五）其他資金</td>
<td class="table-th" colspan="2">M</td>
<td>
<input class="compute" disabled style="width: 100%;outline: none;border: none;" type="text" v-model="tableData['合計'].income.m">
</td>
<td>
<input class="compute" disabled style="width: 100%;outline: none;border: none;" type="text" v-model="tableData['合計'].expend.m">
</td>
<td v-for="index in showYear*2" :key="index">
<input class="compute" disabled v-if="(index-1)%2" style="width: 100%;outline: none;border: none;" type="text"
v-model="tableData[count+ Math.floor((index-1)/2) +''].expend.m">
<input class="compute" v-else style="width: 100%;outline: none;border: none;" type="text"
v-model="tableData[count+ Math.floor((index-1)/2) +''].income.m">
</td>
</tr>
<!-- 二、項目建設支出 -->
<tr>
<td class="table-th" colspan="4">二、項目建設支出</td>
<td class="table-th" colspan="2">B=N+O+P+Q</td>
<td>
<input class="compute" disabled style="width: 100%;outline: none;border: none;" type="text" v-model="tableData['合計'].income.b">
</td>
<td>
<input class="compute" disabled style="width: 100%;outline: none;border: none;" type="text" v-model="tableData['合計'].expend.b">
</td>
<td v-for="index in showYear*2" :key="index">
<input class="compute" disabled v-if="(index-1)%2" style="width: 100%;outline: none;border: none;" type="text"
v-model="tableData[count+ Math.floor((index-1)/2) +''].expend.b">
<input class="compute" disabled v-else style="width: 100%;outline: none;border: none;" type="text"
v-model="tableData[count+ Math.floor((index-1)/2) +''].income.b" >
</td>
</tr>
<!-- （一）項目建設成本（不含財務費用） -->
<tr>
<td class="table-th" colspan="4">（一）項目建設成本（不含財務費用）</td>
<td class="table-th" colspan="2">N</td>
<td>
<input class="compute" disabled style="width: 100%;outline: none;border: none;" type="text" v-model="tableData['合計'].income.n">
</td>
<td>
<input class="compute" disabled style="width: 100%;outline: none;border: none;" type="text" v-model="tableData['合計'].expend.n">
</td>
<td v-for="index in showYear*2" :key="index">
<input class="compute" v-if="(index-1)%2" style="width: 100%;outline: none;border: none;" type="text"
v-model="tableData[count+ Math.floor((index-1)/2) +''].expend.n">
<input class="compute" disabled v-else style="width: 100%;outline: none;border: none;" type="text"
v-model="tableData[count+ Math.floor((index-1)/2) +''].income.n">
</td>
</tr>
<!-- （二）財務費用-專項債券付息 -->
<tr>
<td class="table-th" colspan="4">（二）財務費用-專項債券付息</td>
<td class="table-th" colspan="2">O</td>
<td>
<input class="compute" disabled style="width: 100%;outline: none;border: none;" type="text" v-model="tableData['合計'].income.o">
</td>
<td>
<input class="compute" disabled style="width: 100%;outline: none;border: none;" type="text" v-model="tableData['合計'].expend.o">
</td>
<td v-for="index in showYear*2" :key="index">
<input class="compute" v-if="(index-1)%2" style="width: 100%;outline: none;border: none;" type="text"
v-model="tableData[count+ Math.floor((index-1)/2) +''].expend.o">
<input class="compute" disabled v-else style="width: 100%;outline: none;border: none;" type="text"
v-model="tableData[count+ Math.floor((index-1)/2) +''].income.o">
</td>
</tr>
<!-- （三）財務費用-市場化融資付息 -->
<tr>
<td class="table-th" colspan="4"> （三）財務費用-市場化融資付息</td>
<td class="table-th" colspan="2">P</td>
<td>
<input class="compute" disabled style="width: 100%;outline: none;border: none;" type="text" v-model="tableData['合計'].income.p">
</td>
<td>
<input class="compute" disabled style="width: 100%;outline: none;border: none;" type="text" v-model="tableData['合計'].expend.p">
</td>
<td v-for="index in showYear*2" :key="index">
<input class="compute" v-if="(index-1)%2" style="width: 100%;outline: none;border: none;" type="text"
v-model="tableData[count+ Math.floor((index-1)/2) +''].expend.p">
<input class="compute" disabled v-else style="width: 100%;outline: none;border: none;" type="text"
v-model="tableData[count+ Math.floor((index-1)/2) +''].income.p">
</td>
</tr>
<!-- （四）其他建設支出 -->
<tr>
<td class="table-th" colspan="4">（四）其他建設支出</td>
<td class="table-th" colspan="2">Q</td>
<td>
<input class="compute" disabled style="width: 100%;outline: none;border: none;" type="text" v-model="tableData['合計'].income.q">
</td>
<td>
<input class="compute" disabled style="width: 100%;outline: none;border: none;" type="text" v-model="tableData['合計'].expend.q">
</td>
<td v-for="index in showYear*2" :key="index">
<input class="compute" v-if="(index-1)%2" style="width: 100%;outline: none;border: none;" type="text"
v-model="tableData[count+ Math.floor((index-1)/2) +''].expend.q">
<input class="compute" disabled v-else style="width: 100%;outline: none;border: none;" type="text"
v-model="tableData[count+ Math.floor((index-1)/2) +''].income.q">
</td>
</tr>
<!-- 三、項目運營預期收入 -->
<tr>
<td class="table-th" colspan="4">三、項目運營預期收入</td>
<td class="table-th" colspan="2">C=R+S+T</td>
<td>
<input class="compute" disabled style="width: 100%;outline: none;border: none;" type="text"
v-model="tableData['合計'].income.c">
</td>
<td>
<input class="compute" disabled style="width: 100%;outline: none;border: none;" type="text"
v-model="tableData['合計'].expend.c">
</td>
<td v-for="index in showYear*2" :key="index">
<input class="compute" disabled v-if="(index-1)%2" style="width: 100%;outline: none;border: none;" type="text"
v-model="tableData[count+ Math.floor((index-1)/2) +''].expend.c">
<input class="compute" disabled v-else style="width: 100%;outline: none;border: none;" type="text"
v-model="tableData[count+ Math.floor((index-1)/2) +''].income.c">
</td>
</tr>
<!-- （一）財政補貼收入 -->
<tr>
<td class="table-th" colspan="4">（一）財政補貼收入</td>
<td class="table-th" colspan="2">R</td>
<td>
<input class="compute" disabled style="width: 100%;outline: none;border: none;" type="text" v-model="tableData['合計'].income.r">
</td>
<td>
<input class="compute" disabled style="width: 100%;outline: none;border: none;" type="text" v-model="tableData['合計'].expend.r">
</td>
<td v-for="index in showYear*2" :key="index">
<input class="compute" disabled v-if="(index-1)%2" style="width: 100%;outline: none;border: none;" type="text"
v-model="tableData[count+ Math.floor((index-1)/2) +''].expend.r">
<input class="compute" v-else style="width: 100%;outline: none;border: none;" type="text"
v-model="tableData[count+ Math.floor((index-1)/2) +''].income.r">
</td>
</tr>
<!-- （二）項目自身經(jīng)營收入 -->
<tr>
<td class="table-th" colspan="4">（二）項目自身經(jīng)營收入</td>
<td class="table-th" colspan="2">S</td>
<td>
<input class="compute" disabled style="width: 100%;outline: none;border: none;" type="text" v-model="tableData['合計'].income.s">
</td>
<td>
<input class="compute" disabled style="width: 100%;outline: none;border: none;" type="text" v-model="tableData['合計'].expend.s">
</td>
<td v-for="index in showYear*2" :key="index">
<input class="compute" disabled v-if="(index-1)%2" style="width: 100%;outline: none;border: none;" type="text"
v-model="tableData[count+ Math.floor((index-1)/2) +''].expend.s">
<input class="compute" v-else style="width: 100%;outline: none;border: none;" type="text"
v-model="tableData[count+ Math.floor((index-1)/2) +''].income.s">
</td>
</tr>
<!-- （三）其他收入 -->
<tr>
<td class="table-th" colspan="4">（三）其他收入</td>
<td class="table-th" colspan="2">T</td>
<td>
<input class="compute" disabled style="width: 100%;outline: none;border: none;" type="text" v-model="tableData['合計'].income.t">
</td>
<td>
<input class="compute" disabled style="width: 100%;outline: none;border: none;" type="text" v-model="tableData['合計'].expend.t">
</td>
<td v-for="index in showYear*2" :key="index">
<input class="compute" disabled v-if="(index-1)%2" style="width: 100%;outline: none;border: none;" type="text"
v-model="tableData[count+ Math.floor((index-1)/2) +''].expend.t">
<input class="compute" v-else style="width: 100%;outline: none;border: none;" type="text"
v-model="tableData[count+ Math.floor((index-1)/2) +''].income.t">
</td>
</tr>
<!-- 四、項目運營支出 -->
<tr>
<td class="table-th" colspan="4">四、項目運營支出</td>
<td class="table-th" colspan="2">D=U+V+W+X</td>
<td>
<input class="compute" disabled style="width: 100%;outline: none;border: none;" type="text" v-model="tableData['合計'].income.d">
</td>
<td>
<input class="compute" disabled style="width: 100%;outline: none;border: none;" type="text" v-model="tableData['合計'].expend.d">
</td>
<td v-for="index in showYear*2" :key="index">
<input class="compute" disabled v-if="(index-1)%2" style="width: 100%;outline: none;border: none;" type="text"
v-model="tableData[count+ Math.floor((index-1)/2) +''].expend.d">
<input class="compute" disabled v-else style="width: 100%;outline: none;border: none;" type="text"
v-model="tableData[count+ Math.floor((index-1)/2) +''].income.d">
</td>
</tr>
<!-- （一）項目運營成本（不含財務費用） -->
<tr>
<td class="table-th" colspan="4">（一）項目運營成本（不含財務費用）</td>
<td class="table-th" colspan="2">U</td>
<td>
<input class="compute" disabled style="width: 100%;outline: none;border: none;" type="text" v-model="tableData['合計'].income.u">
</td>
<td>
<input class="compute" disabled style="width: 100%;outline: none;border: none;" type="text" v-model="tableData['合計'].expend.u">
</td>
<td v-for="index in showYear*2" :key="index">
<input class="compute" v-if="(index-1)%2" style="width: 100%;outline: none;border: none;" type="text"
v-model="tableData[count+ Math.floor((index-1)/2) +''].expend.u">
<input class="compute" disabled v-else style="width: 100%;outline: none;border: none;" type="text"
v-model="tableData[count+ Math.floor((index-1)/2) +''].income.u">
</td>
</tr>
<!-- （二）財務費用-專項債券付息 -->
<tr>
<td class="table-th" colspan="4">（二）財務費用-專項債券付息</td>
<td class="table-th" colspan="2">V</td>
<td>
<input class="compute" disabled style="width: 100%;outline: none;border: none;" type="text" v-model="tableData['合計'].income.v">
</td>
<td>
<input class="compute" disabled style="width: 100%;outline: none;border: none;" type="text" v-model="tableData['合計'].expend.v">
</td>
<td v-for="index in showYear*2" :key="index">
<input class="compute" v-if="(index-1)%2" style="width: 100%;outline: none;border: none;" type="text"
v-model="tableData[count+ Math.floor((index-1)/2) +''].expend.v">
<input class="compute" disabled v-else style="width: 100%;outline: none;border: none;" type="text"
v-model="tableData[count+ Math.floor((index-1)/2) +''].income.v">
</td>
</tr>
<!-- （三）財務費用-市場化融資付息 -->
<tr>
<td class="table-th" colspan="4"> （三）財務費用-市場化融資付息</td>
<td class="table-th" colspan="2">W</td>
<td>
<input class="compute" disabled style="width: 100%;outline: none;border: none;" type="text" v-model="tableData['合計'].income.w">
</td>
<td>
<input class="compute" disabled style="width: 100%;outline: none;border: none;" type="text" v-model="tableData['合計'].expend.w">
</td>
<td v-for="index in showYear*2" :key="index">
<input class="compute" v-if="(index-1)%2" style="width: 100%;outline: none;border: none;" type="text"
v-model="tableData[count+ Math.floor((index-1)/2) +''].expend.w">
<input class="compute" disabled v-else style="width: 100%;outline: none;border: none;" type="text"
v-model="tableData[count+ Math.floor((index-1)/2) +''].income.w">
</td>
</tr>
<!-- （四）其他運營支出-->
<tr>
<td class="table-th" colspan="4">（四）其他運營支出</td>
<td class="table-th" colspan="2">X</td>
<td>
<input class="compute" disabled style="width: 100%;outline: none;border: none;" type="text" v-model="tableData['合計'].income.x">
</td>
<td>
<input class="compute" disabled style="width: 100%;outline: none;border: none;" type="text" v-model="tableData['合計'].expend.x">
</td>
<td v-for="index in showYear*2" :key="index">
<input class="compute" v-if="(index-1)%2" style="width: 100%;outline: none;border: none;" type="text"
v-model="tableData[count+ Math.floor((index-1)/2) +''].expend.x">
<input class="compute" disabled v-else style="width: 100%;outline: none;border: none;" type="text"
v-model="tableData[count+ Math.floor((index-1)/2) +''].income.x">
</td>
</tr>
<!-- 五、專項債券還本-->
<tr>
<td class="table-th" colspan="4">五、專項債券還本</td>
<td class="table-th" colspan="2">E</td>
<td>
<input class="compute" disabled style="width: 100%;outline: none;border: none;" type="text" v-model="tableData['合計'].income.e">
</td>
<td>
<input class="compute" disabled style="width: 100%;outline: none;border: none;" type="text" v-model="tableData['合計'].expend.e">
</td>
<td v-for="index in showYear*2" :key="index">
<input class="compute" v-if="(index-1)%2" style="width: 100%;outline: none;border: none;" type="text"
v-model="tableData[count+ Math.floor((index-1)/2) +''].expend.e">
<input class="compute" disabled v-else style="width: 100%;outline: none;border: none;" type="text"
v-model="tableData[count+ Math.floor((index-1)/2) +''].income.e">
</td>
</tr>
<!-- 六、市場化融資還本-->
<tr>
<td class="table-th" colspan="4">六、市場化融資還本</td>
<td class="table-th" colspan="2">F</td>
<td>
<input class="compute" disabled style="width: 100%;outline: none;border: none;" type="text" v-model="tableData['合計'].income.f">
</td>
<td>
<input class="compute" disabled style="width: 100%;outline: none;border: none;" type="text" v-model="tableData['合計'].expend.f">
</td>
<td v-for="index in showYear*2" :key="index">
<input class="compute" v-if="(index-1)%2" style="width: 100%;outline: none;border: none;" type="text"
v-model="tableData[count+ Math.floor((index-1)/2) +''].expend.f">
<input class="compute" disabled v-else style="width: 100%;outline: none;border: none;" type="text"
v-model="tableData[count+ Math.floor((index-1)/2) +''].income.f">
</td>
</tr>
</table>
</div>計算方法寫在mounted中，這里本來是打算使用watch進行監(jiān)聽的，結果計算出來太慢了，所以就只能直接修改dom節(jié)點了。獲取所有的compute類進行操作。（本來是直接獲取inout框，后來發(fā)現(xiàn)這樣的話上面的input框也會變化，就加了類）
mounted() {
this.getMajorProject()
// 獲取所有class為compute的dom元素節(jié)點 遍歷監(jiān)聽change事件 當焦點消失的時候數(shù)據(jù)變化
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()
})
})
},可編輯的表格就實現(xiàn)了，我們還需要控制表格只能輸入數(shù)字，這個功能大哥當然是讓我自己做，但我項目要的太急還沒來得及做，之后有時間實現(xiàn)一下校驗的功能。
接下來是要根據(jù)輸入的項目年限（圖片上寫錯了）顯示對應的列數(shù)。其實說是項目年限，其實項目年限是不能填的，項目年限是建設年限和預算年限的合計。
所以很簡單，我們監(jiān)聽一下建設年限和預算年限，做個加法就行。但是問題又來了，項目是用jeecg寫的，v-decorator好像不支持監(jiān)聽，我寫了沒反應，也可能是我不會。那就直接寫change事件。
得到項目期限之后，需要表格跟著變化，其實就把項目期限的值賦給showYear就行。但是可能是因為有了change事件，項目期限不能再寫了，所以最后就直接寫在建設和預算的change事件里了。
還有一個注意點是需要使用數(shù)字輸入框，這樣value才是一個值，直接input，每變化一次，內(nèi)容都會變化。輸入10會被當成1和0。
<a-col :xs="24" :sm="12">
<a-form-item label="建設期限（年）" :labelCol="labelCol" :wrapperCol="wrapperCol">
<!-- <a-input v-decorator="['constructionPeriod']" placeholder="請輸入建設期限（年）"></a-input> -->
<a-input-number style="width:100%;" v-decorator="['constructionPeriod',{initialValue:this.constructionPeriod}]" placeholder="請輸入建設期限（年）" @change="changeJsNum" />
</a-form-item>
</a-col>
<a-col :xs="24" :sm="12">
<a-form-item label="運營期限（年）" :labelCol="labelCol" :wrapperCol="wrapperCol">
<!-- <a-input v-decorator="['operatingPeriod']" placeholder="請輸入運營期限（年）"></a-input> -->
<a-input-number style="width:100%;" v-decorator="['operatingPeriod',{initialValue:this.operatingPeriod}]" placeholder="請輸入運營期限（年）" @change="changeYyNum" />
</a-form-item>
</a-col>
<a-col :xs="24" :sm="12">
<a-form-item label="項目期限（年）" :labelCol="labelCol" :wrapperCol="wrapperCol">
<!-- <a-input v-decorator="['projectPeriod']" placeholder="請輸入項目期限（年）"></a-input> -->
<a-input-number style="width:100%;" v-decorator="['projectPeriod',{initialValue:this.projectPeriod}]" placeholder="請輸入項目期限（年）" disabled />
</a-form-item>
</a-col>// 建設年限變化
changeJsNum (value) {
// 將值賦給建設年限
if(value === '' || value === null) {
this.constructionPeriod = 0
} else{
this.constructionPeriod = value
}
// 根據(jù)預算年限進行項目年限的計算 parseInt:字符串轉數(shù)字
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
}
},最后給大家看看我的表格！
項目
年限變化，列數(shù)變化。
以上為個人經(jīng)驗，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關文章
這篇文章主要介紹了Vue之創(chuàng)建項目及目錄方式,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2023-11-11
Vue.js每天必學之過濾器與自定義過濾器,具有一定的參考價值，感興趣的小伙伴們可以參考一下2016-09-09
解決vue中使用Axios調(diào)用接口時出現(xiàn)的ie數(shù)據(jù)處理問題
今天小編就為大家分享一篇解決vue中使用Axios調(diào)用接口時出現(xiàn)的ie數(shù)據(jù)處理問題，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-08-08
這篇文章主要介紹了vue使用動態(tài)組件實現(xiàn)TAB切換效果的方法，幫助大家更好的理解和學習使用vue框架，感興趣的朋友可以了解下2021-05-05
這篇文章主要為大家介紹了Vue生命周期中的八個鉤子函數(shù)，具有一定的參考價值，感興趣的小伙伴們可以參考一下，希望能夠給你帶來幫助2021-12-12
elementUI中el-dropdown的command實現(xiàn)傳遞多個參數(shù)
這篇文章主要介紹了elementUI中el-dropdown的command實現(xiàn)傳遞多個參數(shù)方式，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-08-08
這篇文章主要為大家詳細介紹了vue實現(xiàn)簡單無縫滾動效果，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-04-04
這篇文章主要為大家詳細介紹了vue使用highcharts自定義圖例點擊事件，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-03-03
這篇文章主要介紹了vant中的picker選擇器自定義選項內(nèi)容，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-12-12
這篇文章主要為大家介紹了VueJs中如何使用Teleport及組件嵌套層次結構詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2023-04-04