感觉vxe-table这个插件功能是非常的强大，本人工作中大多数功能也都是基于vxe-table去实现的，看了下网络上关于这个插件的用法也是比较少的，所以打算写一写我运用到一切功能。 插件链接：xuliangzhan_admin.gitee.io/vxe-table/
安装方法和引入里面都用介绍的，我就不进行介绍了，和基本的插件引入都一样。
基本功能的话 作者也是写的很清楚的了，直接copy就行了。
第一个就是去除边框，隐藏头部，然后在结合树结构所生成的树表格啦
效果是这样的，最右边的删除是写在和文字一起的（突然发现其实也可以是单独的一列来着），对比饿了me的树表格会好很多，饿了me的树表格用的flex的布局，对于文字太长的列会不太友好。
/* data是要展示的树结构数据
* border="none" 是否显示边框
* show-header 是否显示头部
* tree-node 树表格要收回展开的按钮放在那一列
* indent: '8' 每一级上下缩进的距离
* children: 'children' 以哪个属性为下一级
* expandAll: true 是否一开始展开全部
*/
<vxe-table
:data="hasAvolumetreeData"
ref="avolumeVxeTree"
border="none"
:show-header="false"
max-height="98%"
:tree-config="{children: 'children', expandAll: true, indent: '8'}">
<vxe-table-column title="文件名称" tree-node>
<template v-slot="{row}"> // 这里用的是插槽的写法，这样子你里面就可以自己定义样式啦
<div>{{row.name}}</div>
</template>
<template v-slot="{row：newRow}"> // 这里用的是插槽的写法，重新命名，重新命名的作用在于你可能还会在嵌套列表之类的东西，这样子row的名字就不会重复了，能正常遍历其他的。
<div>{{newRow.name}}</div>
</template>
</vxe-table-column>
</vxe-table>
展开全部的也可以在js使用他自带的方法进行展开
this.$refs.avolumeVxeTree.setAllTreeExpand(true)
在这里也有详细介绍，进阶的一些用法就是，指定展开哪一些数据，像我这里就是展开到那一级别的数据。所以我是先去递归遍历对应到第几级，返回这些需要展开的数据，然后使用this.$refs.avolumeVxeTree.setTreeExpand()这个方法去展开，setTreeExpand里面需要两个参数，第一个是要展开的所有数据组成的数组，第二个传true就行了。效果就是这样子啦。
emmmmmm，感觉写到这里发现有点一般般，因为这个表格的功能实在是太强了，就连虚拟滚动也有
不过这里的虚拟滚动只能不支持树结构的数据，所以就需要用到一个现在还在开发的插件了 vxe-virtual-tree 这个下一次在介绍怎么使用吧。
