您好,登錄后才能下訂單哦!
這篇文章將為大家詳細(xì)講解有關(guān)利用vue怎么實(shí)現(xiàn)動(dòng)態(tài)合并單元格,文章內(nèi)容質(zhì)量較高,因此小編分享給大家做個(gè)參考,希望大家閱讀完這篇文章后對(duì)相關(guān)知識(shí)有一定的了解。
1、效果圖
2、后臺(tái)返回?cái)?shù)據(jù)格式(平鋪式)
3、后臺(tái)返回?cái)?shù)據(jù)后,整理所需要展示的屬性存儲(chǔ)到(items)數(shù)組內(nèi)
var obj = { "id": curItems[i].id, "feeName": curItems[i].feeName, "projectName": curItems[i].projectName, "projectDetailsName": curItems[i].projectDetailsName, "zbMoney": curItems[i].zbMoney, "qyMoney": curItems[i].qyMoney, "projectId": curItems[i].projectId, "instructions": curItems[i].instructions, "contentText": curItems[i].contentText, "measureText": curItems[i].measureText } if (curItems[i].projectDetailsName == '合計(jì):') { obj.projectName = curItems[i - 1].projectName } _self.items.push(obj) }
4、調(diào)用initData(調(diào)用后會(huì)刪除需要合并的字段內(nèi)容)
_self.initData()
initData(){ const that = this; let arry = []; let itemsCopy = JSON.parse(JSON.stringify(that.items)); for (let i = 0; i < itemsCopy.length; i++) { for (let j = (i + 1); j < itemsCopy.length; j++) { for (let h in itemsCopy[i]) { for (let k in itemsCopy[j]) { if (k == 'feeName' || k == 'projectName' || k == 'projectDetailsName') { if (itemsCopy[j][k] != '小計(jì):' && itemsCopy[j][k] != '合計(jì):') { if (h === k && itemsCopy[i][h] === itemsCopy[j][k]) { delete itemsCopy[j][k] } } } } } } arry.push(itemsCopy[i]); } that.dataT = arry; },
4、合并行數(shù)的代碼
rowSpanF: function (key, val) { const that = this; let num = 0; for (let i in that.items) { for (let j in that.items[i]) { if (j == 'feeName' || j == 'projectName' || j == 'projectDetailsName') { if (key === j && val === that.items[i][j]) { if (that.items[i][j] == '小計(jì):' || that.items[i][j] == '合計(jì):') { return } num++; } } } } if(num==0){ return 1 } return num; },
5、html
代碼如下:
<tr v-for="(item,$index) in dataT"> <td v-if="key!='id'&&(key=='feeName'||key=='projectName'||key=='projectDetailsName'||key=='zbMoney'||key=='qyMoney'||key=='projectId'||key=='instructions'||key=='contentText'||key=='measureText')" v-for="(val,key) in item" :rowspan="rowSpanF(key,val)"> <span v-if="key=='feeName'">{{val}}</span> <span v-if="key=='projectName'">{{val}}</span> <span v-if="key=='projectDetailsName'">{{val}}</span> <span v-if="key=='zbMoney'">{{val}}</span> <span v-if="key=='qyMoney'">{{val}}</span> <span v-if="key=='projectId'">{{item['zbMoney']+item['qyMoney']}}</span> <span v-if="key=='instructions'">{{val}} </span> <span v-if="key=='contentText'">{{val}}</span> <span v-if="key=='measureText'">{{val}}</span> </td> <td> <div v-if="item.projectDetailsName!='小計(jì):'&&item.projectDetailsName!='合計(jì):'"> <!--<span @click="toAdd(allItems[$index])"><a>添加</a></span>--> <span @click="toEdit(item)"><a>編輯</a></span> <span> <a-popconfirm title="確定刪除嗎?" okText="確定" cancelText="取消" @confirm="() => deletArr(item)"> <a href="javascript:;" rel="external nofollow" >刪除</a> </a-popconfirm> </span> </div> </td> </tr>
注意事項(xiàng):
后臺(tái)返回?cái)?shù)據(jù)必須符合該條件
關(guān)于利用vue怎么實(shí)現(xiàn)動(dòng)態(tài)合并單元格就分享到這里了,希望以上內(nèi)容可以對(duì)大家有一定的幫助,可以學(xué)到更多知識(shí)。如果覺得文章不錯(cuò),可以把它分享出去讓更多的人看到。
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng),如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱:is@yisu.com進(jìn)行舉報(bào),并提供相關(guān)證據(jù),一經(jīng)查實(shí),將立刻刪除涉嫌侵權(quán)內(nèi)容。