您好,登錄后才能下訂單哦!
這篇“使用elementUI table展開行內(nèi)嵌套table問題怎么解決”文章的知識(shí)點(diǎn)大部分人都不太理解,所以小編給大家總結(jié)了以下內(nèi)容,內(nèi)容詳細(xì),步驟清晰,具有一定的借鑒價(jià)值,希望大家閱讀完這篇文章能有所收獲,下面我們一起來看看這篇“使用elementUI table展開行內(nèi)嵌套table問題怎么解決”文章吧。
產(chǎn)品需要table展開行內(nèi)嵌套一個(gè)可以翻頁的table,emmm·····我也不知道她咋想的,那么需要就得試下呀
首先,elementui提供了table展開行的一個(gè)功能,那么就在這個(gè)功能上改造就好了,如果實(shí)現(xiàn)的不算特別好,別打我
上代碼
<template> <el-table :data="tableData" > <el-table-column type="expand"> <template slot-scope="props"> <el-form label-position="left" inline class="demo-table-expand"> <el-form-item label="商品名稱"> <span>{{ props.row.name }}</span> </el-form-item> <el-form-item label="所屬店鋪"> <span>{{ props.row.shop }}</span> </el-form-item> <el-form-item label="商品 ID"> <span>{{ props.row.id }}</span> </el-form-item> <el-form-item label="店鋪 ID"> <span>{{ props.row.shopId }}</span> </el-form-item> <el-form-item label="商品分類"> <span>{{ props.row.category }}</span> </el-form-item> <el-form-item label="店鋪地址"> <span>{{ props.row.address }}</span> </el-form-item> <el-form-item label="商品描述"> <span>{{ props.row.desc }}</span> </el-form-item> </el-form> </template> </el-table-column> <el-table-column label="商品 ID" prop="id"> </el-table-column> <el-table-column label="商品名稱" prop="name"> </el-table-column> <el-table-column label="描述" prop="desc"> </el-table-column> </el-table> </template>
<style> .demo-table-expand { font-size: 0; } .demo-table-expand label { width: 90px; color: #99a9bf; } .demo-table-expand .el-form-item { margin-right: 0; margin-bottom: 0; width: 50%; } </style>
<script> export default { data() { return { tableData: [{ id: '12987122', name: '好滋好味雞蛋仔', category: '江浙小吃、小吃零食', desc: '荷蘭優(yōu)質(zhì)淡奶,奶香濃而不膩', address: '上海市普陀區(qū)真北路', shop: '王小虎夫妻店', shopId: '10333' }, { id: '12987123', name: '好滋好味雞蛋仔', category: '江浙小吃、小吃零食', desc: '荷蘭優(yōu)質(zhì)淡奶,奶香濃而不膩', address: '上海市普陀區(qū)真北路', shop: '王小虎夫妻店', shopId: '10333' }, { id: '12987125', name: '好滋好味雞蛋仔', category: '江浙小吃、小吃零食', desc: '荷蘭優(yōu)質(zhì)淡奶,奶香濃而不膩', address: '上海市普陀區(qū)真北路', shop: '王小虎夫妻店', shopId: '10333' }, { id: '12987126', name: '好滋好味雞蛋仔', category: '江浙小吃、小吃零食', desc: '荷蘭優(yōu)質(zhì)淡奶,奶香濃而不膩', address: '上海市普陀區(qū)真北路', shop: '王小虎夫妻店', shopId: '10333' }] } } } </script>
這個(gè)是elementui提供的,那么需要改造el-table-column type=“expand”
代碼如下
<el-table-column fixed="right" align="center" label="操作" width="80" type="expand"> <template slot-scope="scope" v-loading.fullscreen.lock="loading"> <tableList :pageInfo='pageInfo' v-if="showTableData" :tableData="scope.row.children" @getListInfo="getListInfo" @currentChange='currentChangeTableList'></tableList> </template> </el-table-column>
tableList是展開行內(nèi)放的table,正常些就好了,但是遇到的問題是,這個(gè)點(diǎn)展開的時(shí)候table里面的數(shù)據(jù)是動(dòng)態(tài)獲取的,剛開始直接定義的是tableData是直接等于動(dòng)態(tài)獲取的值(:tableData=“tableData” 這????樣子的),但是數(shù)據(jù)有,頁面卻不更新,很多方法試了都不行,emmmm。。。。
有點(diǎn)坑,然后看提供的是從scope.row的children獲取數(shù)據(jù)的,所以接口獲取數(shù)據(jù)之后set進(jìn)這個(gè)row的children內(nèi)就可以實(shí)現(xiàn)了,但是前提要獲取這個(gè)行所在的index,剛好這邊需求是展開后其他展開行要收起,所以兩個(gè)結(jié)合一下就能實(shí)現(xiàn)了
<el-table :data="list" stripe border size="small" :height="tableHeight" v-loading="loading" :row-key="getRowKeys" :expand-row-keys="expands" element-loading-text="拼命加載中" @expand-change="expandChange"> // 當(dāng)用戶對(duì)某一行展開或者關(guān)閉的時(shí)候會(huì)觸發(fā)該事件(展開行時(shí),回調(diào)的第二個(gè)參數(shù)為 expandedRows;樹形表格時(shí)第二參數(shù)為 expanded) <el-table-column fixed="right" align="center" label="操作" width="80" type="expand"> <template slot-scope="scope" v-loading.fullscreen.lock="loading"> <tableList :pageInfo='pageInfo' v-if="showTableData" :tableData="scope.row.children" @getListInfo="getListInfo" @currentChange='currentChangeTableList'></tableList> </template> </el-table-column> </el-table>
js代碼
data() { return { pageInfo:{ total:0, pageNo:1, pageSize:5 }, expands: [] , list: [], // table數(shù)據(jù) getRowKeys(row) { // 行數(shù)據(jù)的Key return row.vehID }, }, methods:{ expandChange(row,expandedRows){ this.showTableData = false this.expands = [] if (expandedRows.length > 0) { row ? this.expands.push(row.vehID) : '' // 只展開一行 this.indexRow = this.list.indexOf(row) //獲取index值,在展開請(qǐng)求數(shù)據(jù)后set進(jìn)row的children this.pageInfo.pageNo = 1 this.queryBigDataOutList() // 接口請(qǐng)求的方法 } }, }
到這里差不多就完成了,但是在點(diǎn)擊內(nèi)部table翻頁的時(shí)候數(shù)據(jù)更新會(huì)出現(xiàn)問題,所以給tableList設(shè)置了v-if這樣數(shù)據(jù)就可以實(shí)時(shí)更新渲染頁面了,因?yàn)榻涌谡?qǐng)求反應(yīng)會(huì)比較慢,所以加了一個(gè)v-loading.fullscreen.lock="loading"加載
項(xiàng)目需求使用展開行實(shí)現(xiàn)表格嵌套,且要根據(jù)當(dāng)前點(diǎn)擊的行來動(dòng)態(tài)獲取展開行中的數(shù)據(jù)
1.展開行中的表格data綁定的必須是外層表格中的數(shù)據(jù)的子項(xiàng),否則會(huì)出現(xiàn)第一次點(diǎn)擊展開嵌套表格不顯示,點(diǎn)擊兩次才會(huì)顯示的bug
export default { data(){ return{ tableData:[{ //外層綁定的data name:'xiaoming', age:'18', rowData:[], //展開行表格綁定的data }], } }, }
但是這個(gè)方法需要每次點(diǎn)擊的時(shí)候獲取到當(dāng)前點(diǎn)擊行的index,并異步請(qǐng)求獲取數(shù)據(jù)添加到外層表格綁定的data中,這樣有些麻煩,我想單獨(dú)定義一個(gè)變量來綁定嵌套的表格
get到一個(gè)不是太好的解決方法,在展開行的tem中加上slot-scope=“scope”,但下面不用使用這個(gè)scope,vscode中可能會(huì)紅線報(bào)錯(cuò),但不影響正常效果
<el-table-column type="expand"> <template slot-scope="scope"> //這里scope會(huì)報(bào)錯(cuò) <el-table :data="rowData"> ... </el-table> </template> </el-table-column> export default { data(){ return{ tableData:[], //外層綁定的data rowData:[], //展開行表格綁定的data } }, }
2.因?yàn)榍短妆砀竦臄?shù)據(jù)是動(dòng)態(tài)獲取的,所以要保證每次只能展開一行,展開多行會(huì)出現(xiàn)每個(gè)展開行的表格數(shù)據(jù)都是一樣的bug
實(shí)現(xiàn)每次只能展開一行,給外層表格添加如下屬性
tem
<el-table :data="tableData" :row-key='getRowKeys' :expand-row-keys="expands" @expand-change="expandChange"> ... </el-table>
js:
export default { data(){ return{ tableData:[], //外層綁定的data rowData:[], //展開行表格綁定的data expands: [], getRowKeys (row) { return row.id }, } }, methods:{ //展開行選項(xiàng)變化時(shí)觸發(fā) expandChange(row,expandedRows){ this.rowData = [] var that = this if (expandedRows.length) { that.expands = [] if (row) { that.expands.push(row.id) } } else { that.expands = [] } this.$http({ //發(fā)送異步請(qǐng)求獲取嵌套表格數(shù)據(jù) ··· }).then(({data})=>{ this.rowData = data.list }) }, } }
以上就是關(guān)于“使用elementUI table展開行內(nèi)嵌套table問題怎么解決”這篇文章的內(nèi)容,相信大家都有了一定的了解,希望小編分享的內(nèi)容對(duì)大家有幫助,若想了解更多相關(guān)的知識(shí)內(nèi)容,請(qǐng)關(guān)注億速云行業(yè)資訊頻道。
免責(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)容。