h5分页样式 css,【前端技术】Quasar Table: 自定义分页样式

说点什么

一个管理端的系统，最常用的是数据表格及分页。

这里我记录一下使用QTable 数据表及QPagination组件来实现想要的数据表格及分页的过程。

可直接跳至文章末尾，看实现效果：传送门。

QTable 数据表

首先，从文档：QTable中能看到很多种表格样式，找到一款与我们的项目UI效果相似的来使用：

示例

title="Treats"

:data="data"

:columns="columns"

row-key="name"

:selected-rows-label="getSelectedString"

selection="multiple"

:selected.sync="selected"

>

methods: {

getSelectedString () {

return '' // 不返回空时，table自带的左下角显示为默认的文字

}

}

示例中，我将selected-rows-label绑定的方法”getSelectedString“的返回值改为了””，因为我们这里不需要表格左下角显示选中数据的信息。

详细的代码不再粘贴，可以在上面的示例中打开查看。

从示例中，可以看到，quasar table默认的分页是如下：

实现table默认的分页

实现代码：

title="Treats"

:data="data"

:columns="columns"

row-key="name"

:selected-rows-label="getSelectedString"

selection=