按条目展示表格数据小插件

对应代码的github仓库的地址:https://github.com/AlexZhong22c/vue-table-nav

demo (在线演示初次加载会有点慢,请稍等)


vue.js的出现,导致很多小插件的简单实现成为可能。

这是一个关于表格数据的分页导航,按照表格中的每个条目作为单元来展示数据。

这样的数据呈现方式可读性更强,设计更人性化。

当然它只适用于少量表格数据的直观呈现,如果数据太多,还是用传统的表格来呈现比较合适。demo的下方我还展示了原始的表格,方便各位看官做做对比。

分页导航

  • 可设置每页显示的条目数
  • 用vue的 计算属性 和对象数组的slice()实现分页显示,非常简便
  • 在总页数比较多的情况下仍能维持导航样式的统一

引用boostrap的样式

  • css写得比较潦草,让大家见笑
  • 对于class=“pagination”,直接从bootstrap库复制了那部分的css样式

用dl dt dd标签展示键值对

  • 阻止dt标签之后的换行
  • 阻止dd标签之前的空白
  • 为了方便阅读,直接用中文作为键值对的键名。在实际工程中当然不能这样。

最后:

如果各位看官喜欢的话去留一个Star吧!

文章目录
  1. 分页导航
  2. 引用boostrap的样式
  3. 用dl dt dd标签展示键值对
  4. 最后: