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' }}