vxe-table进阶使用系列(2)之 vxe-virtual-tree

1,824 阅读2分钟

来啦来啦 vxe-virtual-tree 的使用 ps: 这个插件现在还是内测阶段,但是基本的树表格数据滚动渲染他已经实现了 附上传送门:gitee.com/x-extends/v…

微信图片_20210721180809.png

image.png

(不过里面只有这个demo,很感谢大猩猩大大没有写更详细的教程,让我能写这篇文件,大猩猩大大也很辛苦了,弄开源插件。 ) 开始正式使用,里面最需要的应该就是如何自定义行内容吧,用插槽的方式就行了, 基本的内容就这些了,数据能正常显示出来了

<vxe-virtual-tree
  show-overflow
  row-key
  row-id="id"
  :data="computedAllMaterialData"
  max-height="90%"
  border
  size="mini"
  ref="allClassTable"
  :tree-config="{children: 'children', indent: 6, expandAll: true}"
  :columns="tableColumn"
  highlight-current-row>
      <!-- 自定义插槽 Number-->
      <!-- 这里是序号插槽 -->
      <template #num_default="{ row }">
         <span>{{ row.num }}</span>
      </template>
       <!-- 这里是名称插槽 -->
      <template #name_default="{ row }">
        <div class="admin-hh">
            <span>{{ row.name }}</span>
        </div>
      </template>
 </vxe-virtual-tree>
 
 export default {
  data () {
    return {
      // 使用插槽模板渲染
      tableColumn: [
        { field: 'num', title: '序号', width: 80,  slots: { default: 'num_default', }},
        { field: 'name', title: '名称', treeNode: true, minWidth: 200, slots: { default: 'name_default'} }
      ]
    }
  }
}

第二个遇到的问题就是,每一行单独的高度是固定的,遇到字数过多的情况,这个插件的处理是超出隐藏,不会换行,然后鼠标移动上去会有提示,通过这样的方式去展示超出的数据。

为什么要这样弄呢,我自己猜测了下,在虚拟滚动的中,如果是列表的数据形式的话,那么在获取每一行高度,定位到相关行相对于树结构的虚拟滚动操作会简单很多,因为树结构的级别如果不确定的话,有可能可视区域内的第一行是最后一级的数据,然后你需要找到这一个,有可能找完,有可能找不完,可能找完这个还会有同级的需要继续找,巴拉巴拉。

当高度固定的情况下,就不用去获取每一行的高度了,只需要考虑 高度 / 每一行的高度 = 去树结构找到的可视区域顶部是哪个数据,然后根据滚动的高度,在去重新组装数据,重新渲染就行了。

解决办法,首先先把高度扩大一丢丢就行了,好在大猩猩大大是直接获取css里面的单独行高度去计算的,所以改下高度不影响操作。改下高度后还要弄个div设置超出换行显示滚动条的操作。

.vxe-body--row{
    height: 50px!important;
}
/*缩小内边距,显示更多内容*/
.vxe-body--row .vxe-body--column .vxe-cell.c--tooltip{
    padding: 0 4px!important;
    min-height: 45px!important;
    align-items: center;
}
.admin-hh{
    font-size:12px;
    word-wrap: break-word; // 换行操作
    word-break: break-all;
    white-space: normal;
    display:-webkit-box; 
    max-height: 40px;
    overflow-y: auto;
}
/*展开按钮样式*/
.t--animat .vxe-table--expand-btn, .t--animat .vxe-tree--node-btn{
    position: absolute;
    left: 0;
}

效果如下 image.png

image.png

好了,以上就是vxe-virtual-tree,能正常使用vxe-table里面给的部分方法。 之后在把基础用法给补上,进阶使用的看情况更新了。 要说还有什么我觉得可以写的,emmm,那应该是拖动功能了,之后在更新啦。