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.
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:
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
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
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 slot
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
How to use the tree table component vue-table-with-tree-grid of
Guess you like
Origin blog.csdn.net/weixin_46144394/article/details/104515627
Recommended
Ranking