I feel that vxE-table plug-in function is very powerful, most of the functions in my work are based on VXE-table to achieve, look at the network about the use of this plug-in is relatively little, so I intend to write a write I use all functions. Link of the plug-in: xuliangZhan_admin.gize. IO /vxe-table/

Installation method and introduction inside are introduced, I will not introduce, and basic plug-in introduction are the same. The basic function of the author is also written very clear, direct copy on the line.

The first is to remove the border, hide the header, and then combine the tree structure to generate the tree table

The effect is that the deletion on the right is written alongside the text (it could be a separate column, too, as it turns out), which is much better than the flex layout for the me tree table, which is unfriendly to columns with too much text.

   /* data is the tree structure data to display * border="none" whether to display border * show-header whether to display header * tree-node tree table to retrieve the expanded button in which column * indent: ExpandAll: true whether to expandAll at first */
  <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="File Name" tree-node>
    <template v-slot="{row}">// Use the slot notation, so that you can define your own style<div>{{row.name}}</div>
    </template>
    
    <template v-slot="{row: newRow}">// Rename the row because you might be nesting a list or something, so that the row name doesn't repeat itself, and you can iterate over the rest of the row.<div>{{newRow.name}}</div>
    </template>
  </vxe-table-column>
</vxe-table>
Copy the code
Expand all can also be expanded in JS using its own methodsthis.$refs.avolumeVxeTree.setAllTreeExpand(true)
Copy the code

And it’s described in detail here, but some of the more advanced uses are to specify which bits of data to expand, like I did here to expand at that level. So I am go to the recursive traversal corresponding to the first class, return to the need of data, and then use this. $refs. AvolumeVxeTree. SetTreeExpand () this method to expand, setTreeExpand it needs two parameters, The first is an array of all the data to expand, and the second is true. That’s what it looks like.

Emmmmmm, I feel a little general here, because this table is so powerful, even virtual scrolling

Vxe-virtual-tree (vxe-virtual-tree) is a plugin that is currently under development and can be used next time.