使用elementUI table展開行內(nèi)嵌套table問題

更新時(shí)間：2023年04月18日 14:49:35 作者：知所云

這篇文章主要介紹了使用elementUI table展開行內(nèi)嵌套table問題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教

elementUI table展開行內(nèi)嵌套table

需求

產(chǎn)品需要table展開行內(nèi)嵌套一個(gè)可以翻頁(yè)的table，emmm·····我也不知道她咋想的，那么需要就得試下呀

使用 vue + elementUI

首先，elementui提供了table展開行的一個(gè)功能，那么就在這個(gè)功能上改造就好了，如果實(shí)現(xiàn)的不算特別好，別打我

上代碼

<template>
? <el-table
? ? :data="tableData"
? ? style="width: 100%">
? ? <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ù)有，頁(yè)面卻不更新，很多方法試了都不行，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翻頁(yè)的時(shí)候數(shù)據(jù)更新會(huì)出現(xiàn)問題，所以給tableList設(shè)置了v-if這樣數(shù)據(jù)就可以實(shí)時(shí)更新渲染頁(yè)面了，因?yàn)榻涌谡?qǐng)求反應(yīng)會(huì)比較慢，所以加了一個(gè)v-loading.fullscreen.lock="loading"加載

elementui展開行踩過的坑

項(xiàng)目需求使用展開行實(shí)現(xiàn)表格嵌套，且要根據(jù)當(dāng)前點(diǎn)擊的行來動(dòng)態(tài)獲取展開行中的數(shù)據(jù)

總結(jié)一下踩過的坑

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
? ? ? ? ? ? })
? ? ? ? },
?? ?}
}