Vue?ELement?Table技巧表格業(yè)務(wù)需求實戰(zhàn)示例
前言
在我們?nèi)粘i_發(fā)中,表格業(yè)務(wù)基本是必不可少的,對于老手來說確實簡單,家常便飯罷了,但是對于新手小白如何最快上手搞定需求呢?本文從思路開始著手,幫你快速搞定表格。
常見業(yè)務(wù)
需求:合并行
1. 合并條碼一樣的兩行
2. 觸摸高亮關(guān)閉,表格顏色重一點
思路分析
調(diào)取element Table的回調(diào)
通過給table
傳入span-method
方法可以實現(xiàn)合并行或列,方法的參數(shù)是一個對象,里面包含當(dāng)前行row
、當(dāng)前列column
、當(dāng)前行號rowIndex
、當(dāng)前列號columnIndex
四個屬性。該函數(shù)可以返回一個包含兩個元素的數(shù)組,第一個元素代表rowspan
,第二個元素代表colspan
。 也可以返回一個鍵名為rowspan
和colspan
的對象。
<div v-loading="loading"> <el-table :span-method="objectSpanMethod" class="unbound-table" ref="cateTable" :data="tbldata.content" header-row-class-name="custom-table-header-color_default"> <el-table-column v-for="col in tableColumns" :key="col.name" :prop="col.name" :label="col.label" :width="col.width"> <template slot-scope="scope"> <div v-if="col.name === 'action'" style="text-align: center" class="action-list"> <el-button v-permission="['admin_add_stdproduct']" type="primary" @click="handleImport(scope.row)">導(dǎo)入標(biāo)準(zhǔn)產(chǎn)品庫</el-button> </div> <span v-else> {{ scope.row[col.name] }} </span> </template> </el-table-column> </el-table> <!-- 分頁 --> <div class="pagination-container"> <el-pagination layout="prev, pager, next" @current-change="loadTable" :current-page.sync="pageable.page" :page-size="pageable.size" :total="tbldata.total" v-if="tbldata.total"></el-pagination> </div> </div>
data(){ return{ spanArr:[], position:0 } } //表格合同方法 --- 此處只合并了第一列 objectSpanMethod({ row, column, rowIndex, columnIndex }){ if (columnIndex === 0) { const _row = this.spanArr[rowIndex]; const _col = _row > 0 ? 1 : 0; return { rowspan: _row, colspan: _col }; } }, //篩出行里面相同的數(shù)據(jù)的index 并組裝進數(shù)組--------請求完表格數(shù)據(jù)后調(diào)用一下這個方法 rowspan() { this.spanArr = [] this.tableData.forEach((item, index) => { if (index === 0) { this.spanArr.push(1); this.position = 0; } else { if (this.tableData[index].code=== this.tableData[index - 1].code) { this.spanArr[this.position] += 1; this.spanArr.push(0); } else { this.spanArr.push(1); this.position = index; } } }); },
.el-table ::v-deep tbody tr:hover > td { background-color: transparent; } .el-table ::v-deep tbody tr td { border-bottom: 1px solid #d6d6d6; }
需求合并列
需求將兩列合并為一列
思路分析
通過給table
傳入span-method
方法可以實現(xiàn)合并行或列,方法的參數(shù)是一個對象,里面包含當(dāng)前行row
、當(dāng)前列column
、當(dāng)前行號rowIndex
、當(dāng)前列號columnIndex
四個屬性。該函數(shù)可以返回一個包含兩個元素的數(shù)組,第一個元素代表rowspan
,第二個元素代表colspan
。 也可以返回一個鍵名為rowspan
和colspan
的對象。 表格數(shù)據(jù)為一維數(shù)組,只需要將一維數(shù)組變?yōu)槎S數(shù)組即可
let arr = [ {regulationsId: 5172, title: "測試111標(biāo)題2 ", type: 610, state: 1, createdTime: 1530152467000}, {regulationsId: 5169, title: "測試111標(biāo)題", type: 610, state: 1, createdTime: 1530085573000}, {regulationsId: 5170, title: "測試123標(biāo)題", type: 609, state: 1, createdTime: 1530085687000}, {regulationsId: 5171, title: "測試1122標(biāo)題", type: 608, state: 1, createdTime: 1530085750000} ]; //獲取數(shù)組中有多少個type let types = []; arr.map((item, index) => { if(types.indexOf(item.type) === -1){ types.push(item.type) } }) //一個包含多個list的結(jié)果對象 let obj = []; // 根據(jù)type生成多個數(shù)組 types.map((typeItem, typeIndex) => { arr.map((arrItem, arrIndex) => { if(arrItem.type == typeItem){ obj[typeIndex] = obj[typeIndex] || []; obj[typeIndex].push(arrItem) } }) })
你可能想去看的
Vue實戰(zhàn)技巧Element Table二次封裝
以上就是Vue ELement Table技巧表格業(yè)務(wù)需求實戰(zhàn)示例的詳細內(nèi)容,更多關(guān)于Vue ELement Table表格業(yè)務(wù)的資料請關(guān)注腳本之家其它相關(guān)文章!
相關(guān)文章
深入淺析Vue.js中 computed和methods不同機制
這篇文章給大家介紹了Vue.js中 computed和methods不同機制,在vue.js中,methods和computed兩種方式來動態(tài)當(dāng)作方法使用,文中還給大家提到了computed和methods的區(qū)別,感興趣的朋友一起看看吧2018-03-03vue 2.5.1 源碼學(xué)習(xí) 之Vue.extend 和 data的合并策略
這篇文章主要介紹了Vue.extend 和 data的合并策略 ,本文通過實例代碼給大家介紹的非常詳細,具有一定的參考借鑒價值,需要的朋友可以參考下2019-06-06利用Vue3實現(xiàn)一個可以用js調(diào)用的組件
最近遇到個功能要求,想要在全局中調(diào)用組件,而且要在某些js文件內(nèi)調(diào)用,所以這篇文章主要給大家介紹了關(guān)于如何利用Vue3實現(xiàn)一個可以用js調(diào)用的組件的相關(guān)資料,需要的朋友可以參考下2021-08-08詳解無限滾動插件vue-infinite-scroll源碼解析
這篇文章主要介紹了詳解無限滾動插件vue-infinite-scroll源碼解析,小編覺得挺不錯的,現(xiàn)在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧2019-05-05部屬vue項目,訪問路徑設(shè)置非根,顯示白屏的解決方案
這篇文章主要介紹了部屬vue項目,訪問路徑設(shè)置非根,顯示白屏的解決方案,具有很好的參考價值,希望對大家有所幫助。如有錯誤或未考慮完全的地方,望不吝賜教2022-04-04vue 音樂App QQ音樂搜索列表最新接口跨域設(shè)置方法
這篇文章主要介紹了vue 音樂App QQ音樂搜索列表最新接口跨域設(shè)置方法,本文通過實例代碼給大家介紹的非常詳細,具有一定的參考借鑒價值,需要的朋友可以參考下2018-09-09