vue中用js如何實(shí)現(xiàn)循環(huán)可編輯表格
更新時(shí)間：2022年09月09日 10:13:52 作者：芝士焗紅薯
這篇文章主要介紹了vue中用js如何實(shí)現(xiàn)循環(huán)可編輯表格，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教
vue用js實(shí)現(xiàn)循環(huán)可編輯表格
最近項(xiàng)目中需要實(shí)現(xiàn)一個(gè)很復(fù)雜的表格，嘗試用組件寫(xiě)，半天寫(xiě)不出來(lái)，循環(huán)真的好繞，最后直接求助大哥幫我用原生js寫(xiě)了一個(gè)。
大哥巴拉巴拉講了半天，先這樣在那樣，問(wèn)我懂了嗎
我說(shuō)懂了！
大哥說(shuō)那你寫(xiě)吧我看著。
我打開(kāi)vs table 停住。
大哥說(shuō) 算了我來(lái)吧 你看著。
躺著真好家人們 我是廢物。
表格的需求
簡(jiǎn)單總結(jié)一下就是
1.表格需要?jiǎng)討B(tài)，根據(jù)輸入的數(shù)字顯示列數(shù)
2.表格可編輯、可禁用、可計(jì)算
其實(shí)單純表格可編輯是比較簡(jiǎn)單的，主要是根據(jù)輸入的年份顯示對(duì)應(yīng)的內(nèi)容，就需要對(duì)表格進(jìn)行循環(huán)，我用組件循環(huán)的時(shí)候總是出現(xiàn)整行或者整列數(shù)據(jù)都一起變的情況，所以需要找到可以編輯單元格的方法。
經(jīng)過(guò)測(cè)試發(fā)現(xiàn)這個(gè)表格，原來(lái)的大哥也是用js寫(xiě)的，并且寫(xiě)死了30年，你輸入之后的年份，也只會(huì)出現(xiàn)30年的數(shù)據(jù)。所以我們直接跟他一樣！
我們可以定義一個(gè)對(duì)象，之后不斷地把內(nèi)容添加進(jìn)這個(gè)對(duì)象就可以。
首先在data中定義一個(gè)對(duì)象，即初始化的表格對(duì)象。
前兩列的表格我們可以直接寫(xiě)死，從合計(jì)開(kāi)始需要進(jìn)行循環(huán)，所以我們直接從合計(jì)開(kāi)始，合計(jì)下再分收入和支出，收入和支出的元素直接根據(jù)公式來(lái)（改成小寫(xiě)是因?yàn)楹蠖私邮諗?shù)據(jù)不區(qū)分大小寫(xiě)，發(fā)大寫(xiě)沒(méi)用）
還定義了當(dāng)前年份count，屬性名數(shù)組keys，和計(jì)算的幾個(gè)公式。
data () {
return {
// 初始化的表格對(duì)象
tableData: {
"合計(jì)": {
'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
}
},
},
// 表格對(duì)象屬性名數(shù)組keys
keys: [],
// 填寫(xiě)的年份 默認(rèn)顯示五年
showYear: 5,
// 當(dāng)前年度
count: new Date().getFullYear(),
// 收入keys a的計(jì)算
incomeKeys: ['h', 'i', 'k', 'l', 'm'],
// 支出keys b的計(jì)算
expendKeys: ['n', 'o', 'p', 'q'],
// 收入keys c的計(jì)算
incomeKeys2: ['r', 's', 't'],
// 支出keys d的計(jì)算
expendKeys2: ['u', 'v', 'w', 'x']
}
}然后在created中把年份加進(jìn)去
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只會(huì)獲取屬性值,所以多加一個(gè)year屬性
'year' : tempAttr
}
}
// Object.keys獲取對(duì)象的屬性名賦值給keys
this.keys = Object.keys(this.tableData)
},到這里我們表格就循環(huán)好了，接下來(lái)畫(huà)表格
<div style="overflowX:scroll; overflowY: scroll;height:350px;">
<!-- 自定義一個(gè)table 實(shí)現(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">合計(jì)</td>
<!-- 循環(huán)表頭年份 index從1開(kāi)始 showYear:選擇的年份 keys:所有年份 -->
<td v-for="index of showYear" :key="index" colspan="2">{{ keys[index - 1] + '年' }}</td>
</tr>
<tr class="table-th">
<!-- 循環(huán)收入和支出 從合計(jì)開(kāi)始所以要showYear+1 收入在前支出在后 -->
<td v-for="index in (showYear+1)*2" :key="index">{{ index % 2 == 0 ? '支出' : '收入' }}</td>
</tr>
<!-- 一、建設(shè)資金來(lái)源 -->
<tr>
<td class="table-th" colspan="4">一、建設(shè)資金來(lái)源</td>
<td class="table-th" colspan="2">A=H+I+K+L+M</td>
<td>
<!-- 合計(jì)的收入計(jì)算自動(dòng)生成 根據(jù)class進(jìn)行dom節(jié)點(diǎn)計(jì)算-->
<input class="compute" disabled style="width: 100%; outline: none; border: none;" type="text"
v-model="tableData['合計(jì)'].income.a">
</td>
<td>
<input class="compute" disabled style="width: 100%;outline: none;border: none;" type="text"
v-model="tableData['合計(jì)'].expend.a">
</td>
<!-- 循環(huán)年份 收入支出所以showYear*2 收入和支出的合計(jì)也計(jì)算自動(dòng)生成 count:當(dāng)前年度 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>
<!-- （一）財(cái)政安排資金 -->
<tr>
<td class="table-th" colspan="4">（一）財(cái)政安排資金</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['合計(jì)'].income.h">
</td>
<td>
<input class="compute" disabled style="width: 100%; outline: none; border: none;" type="text" v-model="tableData['合計(jì)'].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>
<!-- （二）地方政府專項(xiàng)債券 -->
<tr>
<td class="table-th" colspan="4">（二）地方政府專項(xiàng)債券</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['合計(jì)'].income.i">
</td>
<td>
<input class="compute" disabled style="width: 100%;outline: none;border: none;" type="text" v-model="tableData['合計(jì)'].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['合計(jì)'].income.j">
</td>
<td>
<input class="compute" disabled style="width: 100%;outline: none;border: none;" type="text" v-model="tableData['合計(jì)'].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>
<!-- （三）項(xiàng)目單位市場(chǎng)化融資 -->
<tr>
<td class="table-th" colspan="4">（三）項(xiàng)目單位市場(chǎng)化融資</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['合計(jì)'].income.k">
</td>
<td>
<input class="compute" disabled style="width: 100%;outline: none;border: none;" type="text" v-model="tableData['合計(jì)'].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['合計(jì)'].income.l">
</td>
<td>
<input class="compute" disabled style="width: 100%;outline: none;border: none;" type="text" v-model="tableData['合計(jì)'].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['合計(jì)'].income.m">
</td>
<td>
<input class="compute" disabled style="width: 100%;outline: none;border: none;" type="text" v-model="tableData['合計(jì)'].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>
<!-- 二、項(xiàng)目建設(shè)支出 -->
<tr>
<td class="table-th" colspan="4">二、項(xiàng)目建設(shè)支出</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['合計(jì)'].income.b">
</td>
<td>
<input class="compute" disabled style="width: 100%;outline: none;border: none;" type="text" v-model="tableData['合計(jì)'].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>
<!-- （一）項(xiàng)目建設(shè)成本（不含財(cái)務(wù)費(fèi)用） -->
<tr>
<td class="table-th" colspan="4">（一）項(xiàng)目建設(shè)成本（不含財(cái)務(wù)費(fèi)用）</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['合計(jì)'].income.n">
</td>
<td>
<input class="compute" disabled style="width: 100%;outline: none;border: none;" type="text" v-model="tableData['合計(jì)'].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>
<!-- （二）財(cái)務(wù)費(fèi)用-專項(xiàng)債券付息 -->
<tr>
<td class="table-th" colspan="4">（二）財(cái)務(wù)費(fèi)用-專項(xiàng)債券付息</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['合計(jì)'].income.o">
</td>
<td>
<input class="compute" disabled style="width: 100%;outline: none;border: none;" type="text" v-model="tableData['合計(jì)'].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>
<!-- （三）財(cái)務(wù)費(fèi)用-市場(chǎng)化融資付息 -->
<tr>
<td class="table-th" colspan="4"> （三）財(cái)務(wù)費(fèi)用-市場(chǎng)化融資付息</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['合計(jì)'].income.p">
</td>
<td>
<input class="compute" disabled style="width: 100%;outline: none;border: none;" type="text" v-model="tableData['合計(jì)'].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>
<!-- （四）其他建設(shè)支出 -->
<tr>
<td class="table-th" colspan="4">（四）其他建設(shè)支出</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['合計(jì)'].income.q">
</td>
<td>
<input class="compute" disabled style="width: 100%;outline: none;border: none;" type="text" v-model="tableData['合計(jì)'].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>
<!-- 三、項(xiàng)目運(yùn)營(yíng)預(yù)期收入 -->
<tr>
<td class="table-th" colspan="4">三、項(xiàng)目運(yùn)營(yíng)預(yù)期收入</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['合計(jì)'].income.c">
</td>
<td>
<input class="compute" disabled style="width: 100%;outline: none;border: none;" type="text"
v-model="tableData['合計(jì)'].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>
<!-- （一）財(cái)政補(bǔ)貼收入 -->
<tr>
<td class="table-th" colspan="4">（一）財(cái)政補(bǔ)貼收入</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['合計(jì)'].income.r">
</td>
<td>
<input class="compute" disabled style="width: 100%;outline: none;border: none;" type="text" v-model="tableData['合計(jì)'].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>
<!-- （二）項(xiàng)目自身經(jīng)營(yíng)收入 -->
<tr>
<td class="table-th" colspan="4">（二）項(xiàng)目自身經(jīng)營(yí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['合計(jì)'].income.s">
</td>
<td>
<input class="compute" disabled style="width: 100%;outline: none;border: none;" type="text" v-model="tableData['合計(jì)'].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['合計(jì)'].income.t">
</td>
<td>
<input class="compute" disabled style="width: 100%;outline: none;border: none;" type="text" v-model="tableData['合計(jì)'].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>
<!-- 四、項(xiàng)目運(yùn)營(yíng)支出 -->
<tr>
<td class="table-th" colspan="4">四、項(xiàng)目運(yùn)營(yíng)支出</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['合計(jì)'].income.d">
</td>
<td>
<input class="compute" disabled style="width: 100%;outline: none;border: none;" type="text" v-model="tableData['合計(jì)'].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>
<!-- （一）項(xiàng)目運(yùn)營(yíng)成本（不含財(cái)務(wù)費(fèi)用） -->
<tr>
<td class="table-th" colspan="4">（一）項(xiàng)目運(yùn)營(yíng)成本（不含財(cái)務(wù)費(fèi)用）</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['合計(jì)'].income.u">
</td>
<td>
<input class="compute" disabled style="width: 100%;outline: none;border: none;" type="text" v-model="tableData['合計(jì)'].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>
<!-- （二）財(cái)務(wù)費(fèi)用-專項(xiàng)債券付息 -->
<tr>
<td class="table-th" colspan="4">（二）財(cái)務(wù)費(fèi)用-專項(xiàng)債券付息</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['合計(jì)'].income.v">
</td>
<td>
<input class="compute" disabled style="width: 100%;outline: none;border: none;" type="text" v-model="tableData['合計(jì)'].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>
<!-- （三）財(cái)務(wù)費(fèi)用-市場(chǎng)化融資付息 -->
<tr>
<td class="table-th" colspan="4"> （三）財(cái)務(wù)費(fèi)用-市場(chǎng)化融資付息</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['合計(jì)'].income.w">
</td>
<td>
<input class="compute" disabled style="width: 100%;outline: none;border: none;" type="text" v-model="tableData['合計(jì)'].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>
<!-- （四）其他運(yùn)營(yíng)支出-->
<tr>
<td class="table-th" colspan="4">（四）其他運(yùn)營(yíng)支出</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['合計(jì)'].income.x">
</td>
<td>
<input class="compute" disabled style="width: 100%;outline: none;border: none;" type="text" v-model="tableData['合計(jì)'].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>
<!-- 五、專項(xiàng)債券還本-->
<tr>
<td class="table-th" colspan="4">五、專項(xiàng)債券還本</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['合計(jì)'].income.e">
</td>
<td>
<input class="compute" disabled style="width: 100%;outline: none;border: none;" type="text" v-model="tableData['合計(jì)'].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>
<!-- 六、市場(chǎng)化融資還本-->
<tr>
<td class="table-th" colspan="4">六、市場(chǎng)化融資還本</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['合計(jì)'].income.f">
</td>
<td>
<input class="compute" disabled style="width: 100%;outline: none;border: none;" type="text" v-model="tableData['合計(jì)'].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>計(jì)算方法寫(xiě)在mounted中，這里本來(lái)是打算使用watch進(jìn)行監(jiān)聽(tīng)的，結(jié)果計(jì)算出來(lái)太慢了，所以就只能直接修改dom節(jié)點(diǎn)了。獲取所有的compute類進(jìn)行操作。（本來(lái)是直接獲取inout框，后來(lái)發(fā)現(xiàn)這樣的話上面的input框也會(huì)變化，就加了類）
mounted() {
this.getMajorProject()
// 獲取所有class為compute的dom元素節(jié)點(diǎn) 遍歷監(jiān)聽(tīng)change事件 當(dāng)焦點(diǎn)消失的時(shí)候數(shù)據(jù)變化
document.querySelectorAll('.compute').forEach(target => {
target.addEventListener('change', () => {
//年份計(jì)算
// 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解析字符串返回浮點(diǎn)值
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]])
}
}
//合計(jì)計(jì)算
// 先置空
this.tableData['合計(jì)'].income.a = 0;
this.tableData['合計(jì)'].income.h = 0;
this.tableData['合計(jì)'].income.i = 0;
this.tableData['合計(jì)'].income.j = 0;
this.tableData['合計(jì)'].income.k = 0;
this.tableData['合計(jì)'].income.l = 0;
this.tableData['合計(jì)'].income.m = 0;
this.tableData['合計(jì)'].expend.b = 0;
this.tableData['合計(jì)'].expend.n = 0;
this.tableData['合計(jì)'].expend.o = 0;
this.tableData['合計(jì)'].expend.p = 0;
this.tableData['合計(jì)'].expend.q = 0;
this.tableData['合計(jì)'].income.c = 0;
this.tableData['合計(jì)'].income.r = 0;
this.tableData['合計(jì)'].income.s = 0;
this.tableData['合計(jì)'].income.t = 0;
this.tableData['合計(jì)'].expend.d = 0;
this.tableData['合計(jì)'].expend.u = 0;
this.tableData['合計(jì)'].expend.v = 0;
this.tableData['合計(jì)'].expend.w = 0;
this.tableData['合計(jì)'].expend.x = 0;
this.tableData['合計(jì)'].expend.e = 0;
this.tableData['合計(jì)'].expend.f = 0;
for (let i = 0; i < this.showYear; i++) {
this.tableData['合計(jì)'].income.a += parseFloat(this.tableData[this.count + i + ''].income.a);
this.tableData['合計(jì)'].income.h += parseFloat(this.tableData[this.count + i + ''].income.h);
this.tableData['合計(jì)'].income.i += parseFloat(this.tableData[this.count + i + ''].income.i);
this.tableData['合計(jì)'].income.j += parseFloat(this.tableData[this.count + i + ''].income.j);
this.tableData['合計(jì)'].income.k += parseFloat(this.tableData[this.count + i + ''].income.k);
this.tableData['合計(jì)'].income.l += parseFloat(this.tableData[this.count + i + ''].income.l);
this.tableData['合計(jì)'].income.m += parseFloat(this.tableData[this.count + i + ''].income.m);
this.tableData['合計(jì)'].expend.b += parseFloat(this.tableData[this.count + i + ''].expend.b);
this.tableData['合計(jì)'].expend.n += parseFloat(this.tableData[this.count + i + ''].expend.n);
this.tableData['合計(jì)'].expend.o += parseFloat(this.tableData[this.count + i + ''].expend.o);
this.tableData['合計(jì)'].expend.p += parseFloat(this.tableData[this.count + i + ''].expend.p);
this.tableData['合計(jì)'].expend.q += parseFloat(this.tableData[this.count + i + ''].expend.q);
this.tableData['合計(jì)'].income.c += parseFloat(this.tableData[this.count + i + ''].income.c);
this.tableData['合計(jì)'].income.r += parseFloat(this.tableData[this.count + i + ''].income.r);
this.tableData['合計(jì)'].income.s += parseFloat(this.tableData[this.count + i + ''].income.s);
this.tableData['合計(jì)'].income.t += parseFloat(this.tableData[this.count + i + ''].income.t);
this.tableData['合計(jì)'].expend.d += parseFloat(this.tableData[this.count + i + ''].expend.d);
this.tableData['合計(jì)'].expend.u += parseFloat(this.tableData[this.count + i + ''].expend.u);
this.tableData['合計(jì)'].expend.v += parseFloat(this.tableData[this.count + i + ''].expend.v);
this.tableData['合計(jì)'].expend.w += parseFloat(this.tableData[this.count + i + ''].expend.w);
this.tableData['合計(jì)'].expend.x += parseFloat(this.tableData[this.count + i + ''].expend.x);
this.tableData['合計(jì)'].expend.e += parseFloat(this.tableData[this.count + i + ''].expend.e);
this.tableData['合計(jì)'].expend.f += parseFloat(this.tableData[this.count + i + ''].expend.f);
}
// 強(qiáng)刷
this.$forceUpdate()
})
})
},可編輯的表格就實(shí)現(xiàn)了，我們還需要控制表格只能輸入數(shù)字，這個(gè)功能大哥當(dāng)然是讓我自己做，但我項(xiàng)目要的太急還沒(méi)來(lái)得及做，之后有時(shí)間實(shí)現(xiàn)一下校驗(yàn)的功能。
接下來(lái)是要根據(jù)輸入的項(xiàng)目年限（圖片上寫(xiě)錯(cuò)了）顯示對(duì)應(yīng)的列數(shù)。其實(shí)說(shuō)是項(xiàng)目年限，其實(shí)項(xiàng)目年限是不能填的，項(xiàng)目年限是建設(shè)年限和預(yù)算年限的合計(jì)。
所以很簡(jiǎn)單，我們監(jiān)聽(tīng)一下建設(shè)年限和預(yù)算年限，做個(gè)加法就行。但是問(wèn)題又來(lái)了，項(xiàng)目是用jeecg寫(xiě)的，v-decorator好像不支持監(jiān)聽(tīng)，我寫(xiě)了沒(méi)反應(yīng)，也可能是我不會(huì)。那就直接寫(xiě)change事件。
得到項(xiàng)目期限之后，需要表格跟著變化，其實(shí)就把項(xiàng)目期限的值賦給showYear就行。但是可能是因?yàn)橛辛薱hange事件，項(xiàng)目期限不能再寫(xiě)了，所以最后就直接寫(xiě)在建設(shè)和預(yù)算的change事件里了。
還有一個(gè)注意點(diǎn)是需要使用數(shù)字輸入框，這樣value才是一個(gè)值，直接input，每變化一次，內(nèi)容都會(huì)變化。輸入10會(huì)被當(dāng)成1和0。
<a-col :xs="24" :sm="12">
<a-form-item label="建設(shè)期限（年）" :labelCol="labelCol" :wrapperCol="wrapperCol">
<!-- <a-input v-decorator="['constructionPeriod']" placeholder="請(qǐng)輸入建設(shè)期限（年）"></a-input> -->
<a-input-number style="width:100%;" v-decorator="['constructionPeriod',{initialValue:this.constructionPeriod}]" placeholder="請(qǐng)輸入建設(shè)期限（年）" @change="changeJsNum" />
</a-form-item>
</a-col>
<a-col :xs="24" :sm="12">
<a-form-item label="運(yùn)營(yíng)期限（年）" :labelCol="labelCol" :wrapperCol="wrapperCol">
<!-- <a-input v-decorator="['operatingPeriod']" placeholder="請(qǐng)輸入運(yùn)營(yíng)期限（年）"></a-input> -->
<a-input-number style="width:100%;" v-decorator="['operatingPeriod',{initialValue:this.operatingPeriod}]" placeholder="請(qǐng)輸入運(yùn)營(yíng)期限（年）" @change="changeYyNum" />
</a-form-item>
</a-col>
<a-col :xs="24" :sm="12">
<a-form-item label="項(xiàng)目期限（年）" :labelCol="labelCol" :wrapperCol="wrapperCol">
<!-- <a-input v-decorator="['projectPeriod']" placeholder="請(qǐng)輸入項(xiàng)目期限（年）"></a-input> -->
<a-input-number style="width:100%;" v-decorator="['projectPeriod',{initialValue:this.projectPeriod}]" placeholder="請(qǐng)輸入項(xiàng)目期限（年）" disabled />
</a-form-item>
</a-col>// 建設(shè)年限變化
changeJsNum (value) {
// 將值賦給建設(shè)年限
if(value === '' || value === null) {
this.constructionPeriod = 0
} else{
this.constructionPeriod = value
}
// 根據(jù)預(yù)算年限進(jìn)行項(xiàng)目年限的計(jì)算 parseInt:字符串轉(zhuǎn)數(shù)字
if(this.operatingPeriod === ''){
this.projectPeriod = parseInt(this.constructionPeriod)
} else {
this.projectPeriod = parseInt(this.constructionPeriod) + parseInt(this.operatingPeriod)
}
// 計(jì)算之后 建設(shè)或預(yù)算年限的value置空（導(dǎo)致項(xiàng)目年限為空）時(shí)，項(xiàng)目年限會(huì)為字符串0，所以if判斷要加上這個(gè)
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
}
},最后給大家看看我的表格！
項(xiàng)目
年限變化，列數(shù)變化。
以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
相關(guān)文章
十分鐘帶你快速上手Vue3過(guò)渡動(dòng)畫(huà)
在開(kāi)發(fā)中我們想要給一個(gè)組件的顯示和消失添加某種過(guò)渡動(dòng)畫(huà),可以很好的增加用戶體驗(yàn),下面這篇文章主要給大家介紹了關(guān)于如何快速上手Vue3過(guò)渡動(dòng)畫(huà)的相關(guān)資料,需要的朋友可以參考下2022-02-02
vue3中使用Apache?ECharts的詳細(xì)方法
最近在做一些數(shù)據(jù)透析的項(xiàng)目需要用到報(bào)表圖，那么報(bào)表圖好用的有老牌的ECharts，比較新意的AntV，思前馬后的想了一下還是用了Echarts，這篇文章主要介紹了vue3中使用Apache?ECharts,需要的朋友可以參考下2022-11-11
這篇文章主要介紹了Vue axios獲取token臨時(shí)令牌封裝案例，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2020-09-09
JavaScript實(shí)現(xiàn)簡(jiǎn)單的圖片切換功能(實(shí)例代碼)
這篇文章主要介紹了JavaScript實(shí)現(xiàn)簡(jiǎn)單的圖片切換功能，本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友參考下吧2020-04-04
vue-element-admin開(kāi)發(fā)教程(v4.0.0之后)
由于vue-element-admin的架構(gòu)再4.0.0版本后做了重構(gòu)，整體結(jié)構(gòu)上和之前的還是很相似的，但是也有些變化，本文就介紹vue-element-admin開(kāi)發(fā)教程(v4.0.0之后)，感興趣的可以了解一下2022-04-04
無(wú)論是小型項(xiàng)目還是中大型項(xiàng)目，Vue-Router都是必選的一個(gè)組件，Vue-Router提供了便捷的方式進(jìn)行路由跳轉(zhuǎn)，在使用過(guò)程中有一些坑，希望能給在編碼找不到問(wèn)題時(shí)的碼農(nóng)提供一點(diǎn)靈感2022-06-06
Vue2中pinia刷新后數(shù)據(jù)丟失的問(wèn)題解決
Pinia是一個(gè)Vue.js狀態(tài)管理庫(kù)，如果你在組件中修改了store中的數(shù)據(jù)并刷新了界面，Pinia會(huì)將store中的數(shù)據(jù)重置為初始值，從而導(dǎo)致數(shù)據(jù)丟失的問(wèn)題，本文就來(lái)介紹一下問(wèn)題解決，感興趣的可以了解一下2023-12-12
Vite內(nèi)網(wǎng)ip訪問(wèn)2種配置方式
這篇文章主要給大家介紹了關(guān)于Vite內(nèi)網(wǎng)ip訪問(wèn)的2種配置方式,文中通過(guò)實(shí)例代碼介紹的非常詳細(xì),對(duì)大家學(xué)習(xí)或者使用Vite具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2023-07-07![報(bào)錯(cuò)[vuex] unknown action type: userLogin問(wèn)題及解決](http://img.jbzj.com/images/xgimg/bcimg8.png)
報(bào)錯(cuò)[vuex] unknown action type: userLogin問(wèn)
這篇文章主要介紹了報(bào)錯(cuò)[vuex] unknown action type: userLogin問(wèn)題及解決方案，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2023-06-06
這篇文章主要介紹了vant-image本地圖片無(wú)法顯示的解決方式，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2023-01-01