Vue表格首列相同數(shù)據(jù)合并實(shí)現(xiàn)方法
前言
本篇來學(xué)習(xí)下table表格中合并首列相同數(shù)據(jù)的實(shí)現(xiàn)方法
表格首列相同數(shù)據(jù)合并
1. 添加文件
1.src/views 下新建mergeCell.vue文件,代碼如下:
<template> <div id="app"> <el-table :data="tableData" :span-method="(param)=>objectSpanMethod(param)" style="width: 100%; margin-top: 20px"> <el-table-column prop="type_test" label="類型" align='center'> </el-table-column> <el-table-column prop="type_spec" label="模塊" align='center' > </el-table-column> <el-table-column prop="is_execute" label="是否執(zhí)行" align='center' > <template slot-scope="scope"> <span v-if="scope.row.is_execute == true">已執(zhí)行</span> <span v-if="scope.row.is_execute == false">未執(zhí)行</span> </template> </el-table-column> <el-table-column prop="result_status" label="結(jié)果" align='center' > <template slot-scope='scope'> <el-tag :type="scope.row.result_status | ResultFilter"> {{scope.row.result_status}} </el-tag> </template> </el-table-column> <el-table-column prop="created_at" label="創(chuàng)建時(shí)間" align='center' > <template slot-scope="scope"> {{ scope.row.created_at}} </template> </el-table-column> </el-table> </div> </template> <script> export default { filters:{ ResultFilter(status) { const ongSteadyMap = { SUCCESS: 'success', FAILURE: 'danger', NA: 'primary', ABORTED:'info', FAIL:'danger', None: 'warning' } return ongSteadyMap[status] }, }, data() { return { tableData:[ { "id": 1, "created_at": "2023-06-18 11:51:07", "updated_at": "2023-04-18 11:51:07", "type_test": "功能測(cè)試", "type_spec": "登錄", "is_execute": true, "result_status": "SUCCESS" }, { "id": 2, "created_at": "2023-06-18 11:51:07", "updated_at": "2023-06-18 11:51:07", "type_test": "功能測(cè)試", "type_spec": "退出", "cr_id": "", "is_execute": true, "result_status": "SUCCESS" }, { "id": 3, "created_at": "2023-06-18 11:51:07", "updated_at": "2023-06-18 11:51:07", "type_test": "接口測(cè)試", "type_spec": "登錄", "cr_id": "", "is_execute": false, "result_status": "N/A" }, { "id": 4, "created_at": "2023-06-18 11:51:07", "updated_at": "2023-06-18 11:51:07", "type_test": "接口測(cè)試", "type_spec": "退出", "cr_id": "", "is_execute": true, "result_status": "FAIL" } ] }; }, methods: { objectSpanMethod({ row, column, rowIndex, columnIndex }) { console.log('objectSpanMethod',row, column, rowIndex, columnIndex) if (columnIndex === 0) { const _row = this.flitterData(this.tableData).one[rowIndex]; const _col = _row > 0 ? 1 : 0; return { rowspan: _row, colspan: _col, }; } }, flitterData(arr) { // 合并表格第一列 let spanOneArr = []; let concatOne = 0; arr.forEach((item, index) => { if (index === 0) { spanOneArr.push(1); } else { console.log('item',item,index) console.log('arr',arr[index-1]) // 這里的type_test是表格綁定的字段,也就是需要合并的字段,根據(jù)自己的需求來改 if (item.type_test == arr[index -1].type_test) { // 第一列需合并相同內(nèi)容的判斷條件 spanOneArr[concatOne] += 1; spanOneArr.push(0); } else { spanOneArr.push(1); concatOne = index; } } }); return { one: spanOneArr, }; }, } }; </script>
2. 添加路徑
在router下添加,如下路徑
{ path: '/mergeCell', component: Layout, children: [ { path: 'mergeCell', name: 'mergeCell', component: () => import('@/views/mergeCell.vue'), meta: { title: 'mergeCell', icon: 'form' } } ] },
3. 查看效果
npm run dev 運(yùn)行,效果如下圖
到此這篇關(guān)于Vue實(shí)現(xiàn)表格首列相同數(shù)據(jù)合并的文章就介紹到這了,更多相關(guān)vue合并table表格內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
相關(guān)文章
vue-router路由懶加載及實(shí)現(xiàn)方式
這篇文章主要介紹了vue-router路由懶加載及實(shí)現(xiàn)方式,路由懶加載的主要作用是將 路由對(duì)應(yīng)的組件打包成一個(gè)個(gè)的js代碼塊,只有在這個(gè)路由被訪問到的時(shí)候,才會(huì)加載對(duì)應(yīng)組件的代碼塊,需要的朋友可以參考下2022-12-12教你60行代碼實(shí)現(xiàn)一個(gè)迷你響應(yīng)式系統(tǒng)vue
這篇文章主要為大家介紹了教你60行代碼實(shí)現(xiàn)一個(gè)迷你響應(yīng)式系統(tǒng)詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪<BR>2023-03-03vue分片上傳視頻并轉(zhuǎn)換為m3u8文件播放的實(shí)現(xiàn)示例
前端上傳大文件、視頻的時(shí)候會(huì)出現(xiàn)超時(shí)、過大、很慢等情況,為了解決這一問題,跟后端配合做了一個(gè)切片的功能,本文主要介紹了vue分片上傳視頻并轉(zhuǎn)換為m3u8文件播放的實(shí)現(xiàn)示例,感興趣的可以了解一下2023-11-11vue跨域問題:Access?to?XMLHttpRequest?at‘httplocalhost解決
在前端發(fā)出Ajax請(qǐng)求的時(shí)候,有時(shí)候會(huì)產(chǎn)生跨域問題,下面這篇文章主要給大家介紹了關(guān)于vue跨域問題:Access?to?XMLHttpRequest?at‘httplocalhost的解決辦法,需要的朋友可以參考下2023-01-01Vue常見報(bào)錯(cuò)整理大全(從此報(bào)錯(cuò)不害怕)
寫代碼的過程中一定會(huì)遇到報(bào)錯(cuò),遇到報(bào)錯(cuò)不要擔(dān)心,認(rèn)真分析就可以解決報(bào)錯(cuò),同時(shí)積累經(jīng)驗(yàn),早日成為大牛,這篇文章主要給大家介紹了關(guān)于Vue常見報(bào)錯(cuò)整理的相關(guān)資料,需要的朋友可以參考下2022-08-08Vue中使用 ElementUi 的 el-select 實(shí)現(xiàn)全選功能(思路詳解
在開發(fā)中,有一個(gè)需求是 選項(xiàng)組件中使用到一個(gè) 全選的功能,特在這記錄下實(shí)現(xiàn)的方法,方便后續(xù)的查閱,以及方便大家查閱借鑒,對(duì)vue ElementUi 全選功能感興趣的朋友一起看看吧2024-02-02