[{"_1":2,"_3":-5,"_4":-5},"loaderData",{"_5":6,"_7":8},"actionData","errors","root",{"_11":-5},"routes/user.$name.replies",{"_9":10,"_11":12,"_13":14,"_15":16,"_17":18,"_19":16},"replies",[34],"user",{"_20":21,"_13":14,"_22":23,"_24":14,"_25":26,"_27":28,"_29":30,"_31":16,"_32":33},"loginname","liuxiaoxin123","page",1,"limit",50,"total","id","31783","avatar_url","https://avatars2.githubusercontent.com/u/35863441?v=4","githubUsername","create_at","2018-01-30 07:25:56.432","score",5,"topic_count",0,"reply_count","is_star",false,{"_20":35,"_36":37,"_38":39,"_40":41,"_42":43,"_44":45,"_46":33,"_47":33,"_31":48,"_49":50,"_25":51,"_52":53},"28711","author_id","19661","tab","share","content","基于 Element UI table 组件封装的表格组件，只为了让你少些几行代码😎。\r\n\r\n100% 无缝支持 element table 的所有功能！\r\n\r\n项目地址： https://github.com/kinglisky/egrid\r\n\r\n文档地址： http://kinglisky.github.io/egrid\r\n\r\n![屏幕快照 2017-10-26 下午11.48.30.png](//static.cnodejs.org/FrSbH_MBP61r9yNHZYD6O5Uf7RXs)\r\n\r\n![屏幕快照 2017-10-26 下午11.48.44.png](//static.cnodejs.org/Fsai9ArmaUgRgf4_9DvTdJBjvaj_)![屏幕快照 2017-10-26 下午11.50.06.png](//static.cnodejs.org/FniXk_j2rne96nGVR79S0mWFOZC9)\r\n\r\n为什么要在 element table 组件之上再封装一层呢？\r\n\r\n平时我们使用的 element table 时候往往是这样写的：\r\n\r\n```html\r\n\r\n```\r\n\r\n如果每次使用表格都要重复这一段代码，那久而久之你的项目肯定会冗余很多重复的代码，而且也不利于维护。\r\n这时候我们就有必要在原始的表格组件基础上再封装一层，将这些重复的代码放在组件内部，使用时考虑如何通过一种配置的方式去定制表格。\r\n\r\n我觉得理想表格组使用方式应该是：\r\n\r\n```html\r\n\r\n\r\n```\r\n\r\n`data` 对应表格的数据源，`columns` 用于配置表格中各个列的渲染。\r\n\r\n可能有的同学会说，简单的封装我会呀！不是就是 for 渲染几个 `el-table-column` 的事吗？但是这样的封装后，怎么定义自定渲染内容。\r\n\r\n额，这就是重点了，`egrid` 就是为了解决这些问题而写的。\r\n\r\n早前是在自己的项目中封装过简单的 element 表格组件，但通用性不强，于是决定重写一版服务一下大家。\r\n\r\n这里就不讲具体的实现，核心的自定义组件依赖 `` 组件实现的。\r\n\r\n实现其实挺简单的， [源码在这 ]( https://github.com/kinglisky/egrid)，但 100% 无缝支持 element table 的所有功能。\r\n\r\n文档在这： http://kinglisky.github.io/egrid 小小安利一下。","title","基于 Element UI 表格封装的表格组件","last_reply_at","2018-02-09 08:05:20.379","good","top",4,"visit_count",21778,"2017-10-26 15:00:15.439","author",{"_13":54,"_22":55},"kinglisky","https://avatars.githubusercontent.com/u/15852576?v=4"]