What problem does this feature solve?
Tree structures are common in applications such as cities, organizational units, etc. Sometimes not just a single tree to display their names. For example, you need to display other information such as the city's pinyin shorthand. This requires a tree table.
What does the proposed API look like?
On the table component, the data is allowed to be displayed in a tree structure, just like the react library ant.design does, I really hope that Vue can also implement such a function, not just react. Maybe react demo can explain the problem: https://ant.design/components/table/#components-table-demo-expand-children
2条答案
按热度按时间bvjxkvbb1#
I have consulted a lot of information and realized that one of the main questions of the tree table is, is the tree table a tree or a table?
And I think that the tree table should be a table.
So I implemented a simple tree table using iview's table component.
I used the excellent js library lodash to implement it, and also used the iconfont of Alibaba Group.
The main idea is to flatten the tree structure data, turn them into data that can be displayed in the table, and record their subordinate relationship and level.
As for how to deal with expansion and collapse, I thought of the row-class-name of the iview table. As long as I dynamically set "display:none", it looks like it is expanding and closing.
This component can perform basic functions, but there are serious performance problems. When the amount of data exceeds 1000, the operation of the tree table becomes bad.
It seems that iview's table always re-renders all rows when using row-class-name.
I tried to manipulate the DOM directly, so it seems that the performance problem is not so serious, but the direct operation of the DOM itself is very bad.
So is anyone aware of any solution? If necessary, I can send out my component source code.
a14dhokn2#
Reference material： https://juejin.im/post/5be797456fb9a04a0378bb91