vue+element表格實(shí)現(xiàn)多層數(shù)據(jù)的嵌套方式

更新時(shí)間：2022年09月10日 10:06:31 作者：白佯們班的小莫

這篇文章主要介紹了vue+element表格實(shí)現(xiàn)多層數(shù)據(jù)的嵌套方式，具有很好的參考價(jià)值。希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教

vue+element表格實(shí)現(xiàn)多層數(shù)據(jù)嵌套

今天用element的表格渲染了商城的購(gòu)物車列表，element的表格之前也用到過(guò)，它把所有的東西都封裝好了，

這是完成之后的

只需要往里面?zhèn)鲾?shù)據(jù)就可以了，通過(guò)prop來(lái)拿到相對(duì)應(yīng)的字段，非常方便，但是天不盡人愿吶，后臺(tái)接口返回的數(shù)據(jù)

是嵌套多了一層，直接上圖，后臺(tái)返回的數(shù)據(jù)結(jié)構(gòu)

data下面是店鋪的名字和id，orderItemList是店鋪下面的商品，店鋪要顯示，商品更要顯示，(難受)

這nm嵌套兩層，表格拿不出來(lái)啊，于是各種想思路，什么里邊再套一個(gè)表格，這樣會(huì)出現(xiàn)空表頭，也從網(wǎng)上找了很多方法，都是差強(qiáng)人意，決心還是要自己解決，當(dāng)我研究了element的表格之后，發(fā)現(xiàn)一個(gè)叫樹(shù)形數(shù)據(jù)，見(jiàn)下圖

我可以把店鋪名字放到尖括號(hào)展開(kāi)啊，再把店鋪下的orderItemList放到尖括號(hào)展開(kāi)下 (我這無(wú)處安放的才華)。

我研究了樹(shù)形表格之后，發(fā)現(xiàn)無(wú)論是展開(kāi)還是折疊，就拿上圖為例，他的日期的字段必須是一樣的，包括姓名地址也必須是一樣的，但是看我的返回的數(shù)據(jù)不一樣啊，那就要想辦法，于是我就循環(huán)了接口返回的數(shù)據(jù)，代碼如下

for(let i = 0; i < res.data.data.length; i++){
   this.tableData.push({
        'goodsId':i, 
        'title':res.data.data[i].sellerName,
        'children':res.data.data[i].orderItemList
    })
}

按照我需要的字段來(lái)進(jìn)行push，在每次循環(huán)之前要把tableData清空掉，不然你曉得，當(dāng)然你也可以讓后臺(tái)把接口里的字段改掉，我這里后臺(tái)也是拿的別人的改不掉，只能自己想辦法，

樹(shù)形數(shù)據(jù)接收一個(gè):

tree-props="{children: ‘children',hasChildren: ‘hasChildren'}"

這里的children是展開(kāi)下的數(shù)據(jù)，這個(gè)字段是不是children都可以，說(shuō)的是引號(hào)里的啊，外邊的必須是children，hasChildren是是否有這個(gè)展開(kāi)下的數(shù)據(jù)，

我這里沒(méi)有用到，當(dāng)然是用之后還是要做很多的判斷，因?yàn)槟愕牡赇伱忠彩且恍校伙@示店鋪名字，我把我代碼貼出來(lái)，看一下

這是表格結(jié)構(gòu)

<el-table
   :data="tableData"
   style="width: 90%;"
   row-key="goodsId"
   default-expand-all
   :header-cell-class-name='handleHead'
   @selection-change="handleSelectionChange"
   :tree-props="{children: 'children',hasChildren: 'hasChildren'}"
>
   <el-table-column
       width="55"
       type="selection"
       :selectable='handleCheckbox'
   >
   </el-table-column>
   <el-table-column show-overflow-tooltip width="400" label='商品'>
       <template slot-scope="scope">
           <div style="display:inline-block;">
               <img v-if="scope.row.picPath" class="shops-img" :src="scope.row.picPath" alt="">
               <span>{{scope.row.title}}</span>
           </div>
       </template>
   </el-table-column>
   <el-table-column label='單價(jià)' prop="price"></el-table-column>
   <el-table-column label='數(shù)量' prop="num">
       <template v-if="scope.row.num" slot-scope="scope">
           <span @click="shopsNumDown(scope.row.itemId)" class="shops-num-btn curpor">-</span>
           <span class="shops-num">{{scope.row.num}}</span>
           <span @click="shopsNumUp(scope.row.itemId)" class="shops-num-btn curpor">+</span>
       </template>
   </el-table-column>
   <el-table-column label='小計(jì)' prop="totalFee"></el-table-column>
   <el-table-column label='操作'>
       <template v-if="scope.row.price" slot-scope="scope">
           <div class="curpor handle-txt" @click="deleteShops(scope.row.itemId)">
               刪除
           </div>
           <div class="curpor handle-txt" @click="addCollection(scope.row.goodsId)">
               移入收藏夾
           </div>
       </template>
   </el-table-column>
</el-table>

方法

我這里用到了多選框勾選商品，當(dāng)el-table-column的type為selection時(shí)接受一個(gè)方法為selectable，決定誰(shuí)可以被選擇，我這里是只有商品才能被勾選，所以店鋪就給false掉了。

我把表頭的那個(gè)總選框返回一個(gè)class名給隱藏了，最好用visibility: hidden;隱藏，它是占位隱藏，為什么給隱藏，是因?yàn)楣催x了表頭的總選框只能勾選到店鋪，而商品勾選不到，研究了好久也沒(méi)有發(fā)現(xiàn)，需求也不怎么需要，我就給隱藏了

handleCheckbox(row,index){
  if(!row.children){
       return true
   }
},
handleHead(row){
   if(row.columnIndex === 0){
       return 'check-head'
   }
},

以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。

您可能感興趣的文章: