element tree不重新整理視圖_vue+element

在vue項目中，經常會遇到需要重新整理目前頁面的需求。因為vue-router判斷如果路由沒有變化，是不會重新整理頁面擷取資料的。方式1：go(0)和reload()通過location.reload()或是this.$router.go(0)兩種強制重新整理方式，相當于按F5，會出現瞬間白屏，體驗差，不推薦。方式2：定義一個空白路由頁面，路由跳轉到該空白頁後立馬跳回目前頁，實作路由重新整理。在router路由表中定義一個空白路由， // 強制重新整理目前頁所用的中間跳轉頁   {        path: '/redirect/:path*',        component: () => import('@/views/redirect/index')  }寫一個空白路由元件//redirect/index在需要重新整理的頁面使用refresh() {      // 重新整理目前路由      const { fullPath } = this.$route      this.$router.replace({        path: '/redirect' + fullPath      })    } 這種方式，基本上能夠應付絕大多數情況，推薦使用。但是，有時候，有一些極端情況下，這種重新整理不起作用，而又不想用第一種那種毛子般的簡單粗暴的方式的話，下面的方式可以選擇使用。方式3：provede/inject 方式vue官方文檔說了，這個依賴注入方式是給插件開發使用的，普通應用中不推薦使用。但是，效果卻很好。app.vue修改   使用的時候：demo.vue  
           

  xxx 

 原理就是通過依賴注入的方式，在頂部app通過v-if的顯示隐藏來強制切換顯示，以此來讓vue重新渲染整個頁面，app中通過provide方式定義的reload方法，在它的後代元件中，無論嵌套多深，都能夠觸發調用這個方法。具體說明檢視官方文檔。這種方式重新整理，雖然官方說不推薦，但是反正效果挺好，有些方式2解決不了的重新整理問題，這個方式能解決。慎用。

今天用element的表格渲染了商城的購物車清單，element的表格之前也用到過，它把所有的東西都封裝好了，  這是完成之後的  隻需要往裡面傳資料就可以了，通過prop來拿到相對應的字段，非常友善，但是天不盡人願呐，背景接口傳回的資料  是嵌套多了一層，直接上圖，背景傳回的資料結構  data下面是店鋪的名字和id，orderItemList是店鋪下面的商品，店鋪要顯示，商品更要顯示，(難受)這nm嵌套兩層，表格拿不出來啊，于是各種想思路，什麼裡邊再套一個表格，這樣會出現空表頭，也從網上找了很多方法，都是差強人意，決心還是要自己解決，當我研究了element的表格之後，發現一個叫樹形資料，見下圖  我可以把店鋪名字放到尖括号展開啊，再把店鋪下的orderItemList放到尖括号展開下 (我這無處安放的才華)。  我研究了樹形表格之後，發現無論是展開還是折疊，就拿上圖為例，他的日期的字段必須是一樣的，包括姓名位址也必須是一樣的，但是看我的傳回的資料不一樣啊，那就要想辦法，于是我就循環了接口傳回的資料，代碼如下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    })}  按照我需要的字段來進行push，在每次循環之前要把tableData清空掉，不然你曉得，當然你也可以讓背景把接口裡的字段改掉，我這裡背景也是拿的别人的改不掉，隻能自己想辦法，  樹形資料接收一個:tree-props="{children: ‘children’,hasChildren: ‘hasChildren’}"，這裡的children是展開下的資料，這個字段是不是children都可以，說的是引号裡的啊，外邊的必須是children，hasChildren是 是否有這個展開下的資料，我這裡沒有用到，當然是用之後還是要做很多的判斷，因為你的店鋪名字也是一行，隻顯示店鋪名字，我把我代碼貼出來，看一下  這是表格結構
           

{{scope.row.title}}

- {{scope.row.num}} +

删除

移入收藏夾

 方法  我這裡用到了多選框勾選商品，當el-table-column的type為selection時接受一個方法為selectable，決定誰可以被選擇，我這裡是隻有商品才能被勾選，是以店鋪就給false掉了。  我把表頭的那個總選框傳回一個class名給隐藏了，最好用visibility: hidden;隐藏，它是占位隐藏，為什麼給隐藏，是因為勾選了表頭的總選框隻能勾選到店鋪，而商品勾選不到，研究了好久也沒有發現，需求也不怎麼需要，我就給隐藏了handleCheckbox(row,index){ if(!row.children){ return true }},handleHead(row){ if(row.columnIndex === 0){ return 'check-head' }}