首页 > 其他分享 >vxe-table树状表格的实现(v3.5.9)

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

时间:2023-11-01 16:11:06浏览次数:43  
标签:v3.5 表格 vxe true Number table config

这段时间改造了一个报表,需要在之前的基础上添加一个分类的维度,之前的报表样子找不到了,应该是用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,或者你在导出的时候勾选一下也可以,客户懒得点这一下

 

标签:v3.5,表格,vxe,true,Number,table,config
From: https://www.cnblogs.com/rarantella/p/17803383.html

相关文章

  • QT高级(1)QTableView自定义委托集合,一个类实现若干委托
    @目录1同系列文章2功能3源码1同系列文章QT中级(1)QTableView自定义委托(一)实现QSpinBox、QDoubleSpinBox委托QT中级(2)QTableView自定义委托(二)实现QProgressBar委托QT中级(3)QTableView自定义委托(三)实现QCheckBox委托并且将QCheckBox居中QT中级(4)QTableView自定义委托(四)实现QDateTi......
  • MySQL的create table as 与create table like区别
    一、区别对于mysql的复制相同表结构方法,有createtableas和createtablelike两种:createtablet2asselect*fromt1;as创建出来的t2表(新表)缺少t1表(源表)的索引信息,只有表结构相同,没有索引。createtablet2liket1;like创建出来的新表包含源表的完整表结构和索引......
  • Tableau-漏斗图
    漏斗图.xlsx1.数据2.画图1.柱状折线式在右边可以快速调整顺序添加折线并与柱状图双轴调整同步轴并编辑轴将左边的轴倒序在每个折线功能区添加标签2.区域折线式和上面的流程一样,但只用折线然后倒序并选择区域......
  • python sqlalchemy 动态设置表名__tablename__,一个model对应多个table
    fromsqlalchemyimportcreate_engine,Column,BigInteger,Stringfromsqlalchemy.ext.declarativeimportdeclarative_basefromsqlalchemy.ormimportsessionmakerbase=declarative_base()engine=create_engine("postgresql://postgresadmin:[email protected]......
  • el-table选中效果及动态修改
    项目有个需求,是点击关联账户,弹窗显示已经关联的,而且表格上还要勾上效果: 这里的交互有两条线:1.勾选表格内容,上方标签显示和隐藏2.删除上方标签,表格中的该条数据去除选中效果......
  • Stable Diffusion新玩法火了!给几个词就能生成动图,连动图人物的表情和动作都能随意控制
    作者|小戏单说大模型AI的发展对人们想象力释放的助力,基于StableDiffusion模型的方法首当其冲。透过文本描述到图像生成技术,大模型为我们的想象力打开了一个恢弘的梦幻世界。透过点滴文字,就有可能重现禁锢在我们脑海中无法释放的光怪陆离。而最近,StableDiffusion持续进化,......
  • css控制table首列固定内容滚动
    tabletbody{display:block;height:500px;overflow-y:scroll;}tablethead,tbodytr{display:table;width:100%;table-layout:fixed;box-s......
  • Tableau-桑基图
    桑基图.xlsx1.基本函数1.index()2.running_sum(),running_avg()取running_avg举例running_sum:返回从第一行累计的相加到当前行的值3.total()函数公式为TOTAL(expression),表示返回给定表达式(expression)的总计。例如,TOTAL(SUM([营销额])),用于计算各自分区中全部行的SU......
  • iptables 使用总结
       Linux系统的防火墙功能是由内核实现的2.0版内核中,包过滤机制是ipfw,管理工具是ipfwadm2.2版内核中,包过滤机制是ipchain,管理工具是ipchains2.4版及以后的内核中,包过滤机制是netfilter,管理工具是iptablesiptables用户态位于/......
  • 无涯教程-Clojure - Immutable Nature函数
    默认情况下,结构也是不可变的,因此,如果我们尝试更改特定键的值,则它不会更改。Immutable-示例(nsclojure.examples.example(:gen-class))(defnExample[](defstructEmployee:EmployeeName:Employeeid)(defemp(struct-mapEmployee:EmployeeName"Learnfk"......