示例如下:
使用前端框架vue,用vue-cli脚手架搭建的环境,版本为当前最新版本。
组件 | 版本 |
---|---|
vue-cli | v4.0.5 |
vue | v2.6.10 |
vuetify | v2.1.15 |
v-data-table 组件用于显示列表数据,特色有排序,搜索,分页,单元格编辑,表头和行选择。
由于现在表格数据大部分情况下都是来自于后端请求,这里着重讲解服务端数据渲染。纯前端数据渲染,自行查阅官网,官网地址:https://vuetifyjs.com/en/components/data-tables
新增品牌
edit
delete
名称 | 默认值 | 描述 | 详解 |
---|---|---|---|
headers | undefined | 表头信息 | 2.2.1 |
items | [] | 表格要渲染的数据 | 2.2.2 |
options | {} | 排序和分页配置 | 2.2.3 |
server-items-length | -1 | 总记录数 | 2.2.4 |
loading | false | 数据加载条 | 2.2.5 |
通用配置:
headers:[
{
text: string // 列名称
value: string // 列绑定的变量
align?: 'start' | 'center' | 'end' // 列单元格内容对齐方式,默认左对齐
sortable?: boolean // 是否可以排序,默认true
filterable?: boolean // 是否可过滤
divider?: boolean // 是否分隔
class?: string | string[] // 类名既样式名
width?: string | number // 列宽度
filter?: (value: any, search: string, item: any) => boolean
sort?: (a: any, b: any) => number
}
...
]
本例配置:
headers: [
{ text: "ID", value: "id" },
{ text: "名称", value: "name", sortable: false },
{ text: "Logo", value: "logo", sortable: false },
{ text: "首字母", value: "initial" },
{ text: "操作", value: "option", sortable: false }
]
tips: value 取值尽量不要取’action’ ,如果取值为’action‘,那么该列渲染不出数据。原因暂时不清楚,猜测与vue或者vuetify冲突。如小伙伴们找到原因,请告知。
名称 | 类型 | 默认值 | 描述 |
---|---|---|---|
text | string | undefined | 列名 |
value | string | undefined | 列绑定的变量,数组数据根据该变量值渲染对应的列 |
sortable | boolean | true | 指定的列是否可以排序,默认可以排序 |
本例数据:
[
{
"id": 1115,
"name": "HTC",
"logo": "",
"initial": "H"
},
{
"id": 1528,
"name": "LG",
"logo": "",
"initial": "L"
},
{
"id": 1912,
"name": "NEC",
"logo": "",
"initial": "N"
},
{
"id": 2032,
"name": "OPPO",
"logo": "http://img10.360buyimg.com/popshop/jfs/t2119/133/2264148064/4303/b8ab3755/56b2f385N8e4eb051.jpg",
"initial": "O"
},
{
"id": 2505,
"name": "TCL",
"logo": "",
"initial": "T"
},
{
"id": 3177,
"name": "爱贝多",
"logo": "",
"initial": "A"
},
{
"id": 3539,
"name": "安桥(ONKYO)",
"logo": "",
"initial": "A"
},
{
"id": 3941,
"name": "白金(PLATINUM)",
"logo": "",
"initial": "B"
},
{
"id": 4986,
"name": "波导(BiRD)",
"logo": "",
"initial": "B"
},
{
"id": 6522,
"name": "朵唯(DOOV)",
"logo": "",
"initial": "D"
}
]
tips: items属性为表格要渲染的数据,通常为服务端返回数据,格式与表头配置一一对应,
那么数据会自动渲染到响应的列
通用配置:
options: {
page: number // 当前页码,默认第一页
itemsPerPage: number // 每页显示的条目数,默认10
sortBy: string[] // 指定那列排序
sortDesc: boolean[] // 对应的列排序是否降序,默认false
groupBy: string[] // 分组排序
groupDesc: boolean[] // 是否降序,默认false
multiSort: boolean //
mustSort: boolean // 是否必须排序,默认false
}
本例配置:
options: {
page: 1,
itemsPerPage: 10,
sortBy: ["id", 'initial'],
sortDesc: [false, false]
}
名称 | 类型 | 默认值 | 描述 |
---|---|---|---|
page | number | 1 | 当前页码 |
itemsPerPage | number | 10 | 每页显示多少行 |
sortBy | string[]或者string | [] | 指定那些列用来排序,如果指定多个,从前向后一次执行 |
sortDesc | boolean[] 或者 boolean | [] | 指定对应列是否降序排列 |
options中的每一项可以单独作为v-data-table属性配置,不过通常一起配置,效率高
属性:
vue data
{
toatal: -1 // 由对应方法赋值
...
}
名称 | 类型 | 默认值 | 描述 |
---|---|---|---|
server-items-length | number | -1 | 数据总行数 |
tips:属性***server-items-lenght***一旦定义,那么v-data-table内置的排序和分页不可用。需通过事件update:page、update:items-per-page 等来监听改变,自定义实现。详解2.2.6和2.2.7分析。
属性:
vue data:
{
loading: true
...
}
名称 | 类型 | 默认值 | 描述 |
---|---|---|---|
loading | boolean | false | 当设置为true 且没有数据渲染的时候,表头下面显示加载条 |
添加操作列示例:
本例操作列:
edit
delete
vue 事件不在详述,可以查看vue事件相关文档。
v-data-table 事件有同等作用的属性,在某些情况下,属性不可用的时候,可以用该事件
常用对应关系:
常用为分页和排序相关事件。原因前文提及,v-data-table属性server-items-length设置的话,那么内置排序,分页功能不可用,既对应的属性不起作用。那么,就必须用相应的事件处理函数
事件 | 属性 | 触发时机 |
---|---|---|
update:page | page.sync | 当前页码改变触发 |
update:items-per-page | items-per-page.sync | 每页显示条目数改变触发 |
update.sort-by | sort-by.sync | 指定排序列改变触发 |
update.sort-desc | sorc-desc.sync | 指定降序改变触发 |
update.options | options.sync | options 配置中数据改变触发 |
属性:
vue methods:
{
optionsChanged() {} //options项改变触发函数,本例中触发函数,为向后端重新请求数据
...
}
## 5、结语
+ vuetify官网地址:
***小结***:vuetify表格组件多尝试之后,简单易用,顺便提示英语水平。
刚开始学习vuetify ui组件,如有错误之处欢迎指正,共同进步,本人QQ:806797785。