vxe-table树状表格的实现(v3.5.9)

这段时间改造了一个报表,需要在之前的基础上添加一个分类的维度,之前的报表样子找不到了,应该是用a-table写的普通表格,现在前端表格统一转到vxe-table上去了,记录一下开发树形表格过程中的坑。

复制代码
<vxe-table
  border
  id="xTable1"
  ref="xTable1"
  class="xTable1"
  :column-config="{resizable: true,width:100,useKey:true,isHover: true}"
  :row-config="{isHover: false}"
  :loading="loading1"
  :loading-config="{icon: 'vxe-icon-indicator roll', text: '正在拼命加载中...'}"
  :tree-config="{ transform: true,rowField: 'id', parentField: 'parentId'}"
  :custom-config="{ storage: true}"
  :height="tableHeight / 2 +'px'"
  :sort-config="{ multiple: true, chronological: true,trigger: 'cell'}"
  @cell-dblclick="rowCellClick1"
  :rowClassName="handleCss1"
  align="left"
  :export-config="{types:['csv']}"
  :scroll-y="{gt:30}"
  stripe
  show-footer
  :footer-method="footerMethod"
  :footer-span-method="footerColspanMethod"
  show-header-overflow="title"
  empty-text="没有更多数据了!"
  style="margin-top: 5px"
  :data="list1">
  <vxe-column field="yardcode" title="码头" tree-node width="200"/>

</vxe-table>
复制代码
一般就配置一下:tree-config属性,还有父节点的那一列开启tree-node,我刚开始的时候没写这个属性死活加载不出来,蠢死
然后用户又说需要默认展开前三行,查了一下api需要把对应的列的父节点数组,也就是[1,2,3]绑定到expandKeys属性,但是我一直尝试都没有成功
于是我开始把目标朝向vxe-table的方法里,在开启树形表格后,有一个setTreeExpand(array : Array[], boolean : Boolean)方法可以使用,我在拿到数据后直接调用这个方法,每次查询数据后都会重新加载表格
复制代码
getTrainctnRate(this.queryParam).then(response => {
        this.list = response.result
        this.list.sort((a,b) => (Number(b.onctnnum) + Number(b.notctnnum)) - (Number(a.onctnnum) + Number(a.notctnnum)))
        this.list2 = []
        this.$nextTick(() => {
          this.$refs.xTable.setTreeExpand(this.$refs.xTable.getData(0),true)
        })
        this.loading = false
      }).catch(error => {
        this.loading = false
      })
复制代码

还有一个问题,使用vxe-table自带导出树状表格的时候,默认是不带未展开的数据的,需要在export-config把isAllExpand置为true,或者你在导出的时候勾选一下也可以,客户懒得点这一下

 

posted @   li胡不归  阅读(1975)  评论(0编辑  收藏  举报
相关博文:
阅读排行:
· 清华大学推出第四讲使用 DeepSeek + DeepResearch 让科研像聊天一样简单!
· 推荐几款开源且免费的 .NET MAUI 组件库
· 实操Deepseek接入个人知识库
· 易语言 —— 开山篇
· 【全网最全教程】使用最强DeepSeekR1+联网的火山引擎,没有生成长度限制,DeepSeek本体
点击右上角即可分享
微信分享提示