How to use the tree table component vue-table-with-tree-grid of

Usually we use element-ui component library, many components can be resolved with the daily work needs, recently I met a need to build a tree-structured form, but the element component does not, then you need to go through their own third-party components to implement this function. Here Insert Picture Description
So how can we achieve such a structure way? Will need to pass vue-table-with-tree- grid this component of
a developed dependence dependency in vue scaffolding, search for and install vue-table-with-tree- grid the
two, main.js in your project file introduced, as shown:
Here Insert Picture Description
Third, then you can use this to build treetable tag table, you can also open the document properties for viewing on github, github domestic reasons but the speed limit, the speed is too slow to open, I was in here are a few common attributes reference Here Insert Picture Description
a total of seven properties on the map, which are bundled data sources, content columns defined vertical lines, it is an array, each object in the array represents a vertical row to show content, we will discuss below some of its parameters, selection-type multi-select whether the type of table, the default value is true, if you do not want to multi-select box can be set to false, expand-type expansion line effect, show-index the index value of the display data, index-text index custom name, the default is to 'number' word, border table row vertical parting line.
Four, columns vertical row of content
Here Insert Picture Description
for each array is a vertical column content, label vertical column headings, prop bound property, type these longitudinal column columns custom template, name template template column
two arrays Previous value represents two vertical columns of
five, if desired custom template slots, requires such data as a definition of columns in the second array, and the scope is achieved by using the tab slotHere Insert Picture Description
Behind several vertical columns are achieved by inserting a template, and steps to achieve the above two icons is the same, it is no longer list them

Released five original articles · won praise 0 · Views 68

Guess you like

Origin blog.csdn.net/weixin_46144394/article/details/104515627