panhezeng / el-tree-table

el-tree-table
https://github.com/panhezeng/el-tree-table
4 stars 2 forks source link

sort problem #1

Open ray007 opened 5 years ago

ray007 commented 5 years ago

Sorting columns when the tree has expanded nodes results in the table being sorted as if there was no tree.

panhezeng commented 5 years ago

暂时不支持sortable="true"的排序功能,建议使用sortable="custom"的服务器端排序方式,或者自定义sort-method实现,或者使用官方tree table功能。 Temporarily does not support sorting="true" sorting function, it is recommended to use sortable="custom" server-side sorting, or custom sort-method implementation, or use the official tree table function.

ray007 commented 5 years ago

Since expanding and collapsing nodes and sorting are client side actions, doing it all on the server is not really practical for our application. What do you mean by "use the offical tree table function"? And do you have an example for using custom sort?

panhezeng commented 5 years ago

offical tree table https://element.eleme.cn/#/en-US/component/table#tree-data-and-lazy-mode

如果不方便后端排序,前端程序员通过设置sortable="custom",监听 Table 的 sort-change 事件,在监听函数中,根据{ column, prop, order }参数用 Array sort方法 配合递归 对tree data 排序,然后重新赋值tree data属性触发重新渲染。

If it is not convenient for back-end sorting, the front-end programmer listens to the sort-change event of Table by setting sortable="custom". In the listener function, sort the tree data by Array sort method with recursion according to the { column, prop, order } parameter. And then reassign the tree data property to trigger re-rendering.

ray007 commented 5 years ago

Thanks, that's already helped a lot. I hadn't been aware the official table from element-ui also has a tree mode. But without dynamic column configuration, right? Do you plan on adding methods/properties the standard table has and you do not (yet)? Like a sort() method on the table, and a formatter property for the column config?

panhezeng commented 5 years ago

已经增加了排序示例,示例代码是按ID排序 https://panhezeng.github.io/el-tree-table/

A sorting example has been added, the sample code is sorted by ID.

官方table组件有slot功能,就不需要dynamic column configuration了,其实我这个组件,dynamic column configuration也不是必须的啊,slot都可以实现啊,只是在极其特殊的情况下会出现Duplicate keys el-table_1_column_1的Vue warn,这时候就没法用slot了。官方 tree table只是专门定制tree相关的功能还比较少,但是table该有的都有啊。