天之v"/>
vuetify 学习第一天之v
v-data-table组件学习第一天
目录
文章目录
- 1、简介
- 2、常用属性
- 2.1、常用属性
- 2.2、详细描述
- 2.2.1、headers详解
- 2.2.2、items
- 2.2.3 、options
- 2.2.4、server-items-length
- 2.2.5 loading
- 3、插槽
- 4、事件
- 5、结语
内容
示例如下:
使用前端框架vue,用vue-cli脚手架搭建的环境,版本为当前最新版本。
组件 | 版本 |
---|---|
vue-cli | v4.0.5 |
vue | v2.6.10 |
vuetify | v2.1.15 |
1、简介
v-data-table 组件用于显示列表数据,特色有排序,搜索,分页,单元格编辑,表头和行选择。
由于现在表格数据大部分情况下都是来自于后端请求,这里着重讲解服务端数据渲染。纯前端数据渲染,自行查阅官网,官网地址:
2、常用属性
- 页面源代码:
<!-- brand component -->
<template><div><v-card><v-card-title><v-btn small raised color="primary">新增品牌</v-btn><v-spacer></v-spacer><v-text-fieldv-model="search"append-icon="search"label="Search"single-linehide-details@keyup.enter="searchChanged"@click:append="searchChanged"></v-text-field></v-card-title><v-data-table:headers="headers":items="brandList":options.sync="options":server-items-length="total":loading="loading"class="elevation-1"@update:options="optionsChanged"><template v-slot:item.logo="{ item }"><img :src="item.logo" width="100" /></template><template v-slot:item.option="{ item }"><v-icon small class="mr-2" @click="editBrand(item)">edit</v-icon><v-icon small @click="deleteBrand(item.id)">delete</v-icon></template></v-data-table></v-card></div>
</template><script>
export default {data: () => ({search: "",options: {page: 1,itemsPerPage: 10,pageStart: 1,pageStop: 1,sortBy: ["id", "logo"],sortDesc: [false, false]},total: 0,pageCount: 1,brandList: [],loading: false,headers: [{ text: "ID", value: "id" },{ text: "名称", value: "name", sortable: false },{ text: "Logo", value: "logo", sortable: false },{ text: "首字母", value: "initial" },{ text: "操作", value: "option", sortable: false }]}),created() {this.getBrandList();},methods: {// 获取分页搜索品牌列表getBrandList() {this.axios.get("/item/brand/page", {params: {search: this.search,page: this.options.page,rows: this.options.itemsPerPage,sortBy: this.options.sortBy,sortDesc: this.options.sortDesc}}).then(resp => {// console.log(resp);if (resp.status != 200) {// 报错提示}this.brandList = resp.data.items;this.total = resp.data.total;this.options.pageStop = resp.data.totalPage;});},// 编辑品牌editBrand(item) {console.log(item.id);},// 删除指定品牌deleteBrand(itemId) {console.log(itemId);},searchChanged() {if (this.search !== "") {// console.log(this.search);this.getBrandList();}},// 分组、排序项改变,重新向后端请求数据optionsChanged() {// console.log(this.options);this.getBrandList();}},components: {}
};
</script><style lang='scss' scoped>
</style>
2.1、常用属性
名称 | 默认值 | 描述 | 详解 |
---|---|---|---|
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 |
2.2、详细描述
2.2.1、headers详解
- 示例:
通用配置:
headers:[{text: string // 列名称value: string // 列绑定的变量align?: 'start' | 'center' | 'end' // 列单元格内容对齐方式,默认左对齐sortable?: boolean // 是否可以排序,默认truefilterable?: 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 | 指定的列是否可以排序,默认可以排序 |
2.2.2、items
- 示例:
本例数据:
[{"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": ".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属性为表格要渲染的数据,通常为服务端返回数据,格式与表头配置一一对应,
那么数据会自动渲染到响应的列
2.2.3 、options
- 示例:
通用配置:
options: {page: number // 当前页码,默认第一页itemsPerPage: number // 每页显示的条目数,默认10sortBy: string[] // 指定那列排序sortDesc: boolean[] // 对应的列排序是否降序,默认falsegroupBy: string[] // 分组排序groupDesc: boolean[] // 是否降序,默认falsemultiSort: 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属性配置,不过通常一起配置,效率高
2.2.4、server-items-length
- 示例:
属性:
<v-data-table:server-items-length="total"...
</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分析。
2.2.5 loading
- 示例:
属性:
<v-data-table:loading="loading"...
>
</v-data-table>vue data:
{loading: true...
}
- 详解:
名称 | 类型 | 默认值 | 描述 |
---|---|---|---|
loading | boolean | false | 当设置为true 且没有数据渲染的时候,表头下面显示加载条 |
3、插槽
- v-data-table 插槽一般用来定制某一列,比如修改删除操作,根据路径渲染成图片等等
添加操作列示例:
本例操作列:
<template v-slot:item.option="{ item }"><v-icon small class="mr-2" @click="editBrand(item)">edit</v-icon><v-icon small @click="deleteBrand(item.id)">delete</v-icon>
</template>
- 详解
4、事件
-
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 配置中数据改变触发 |
- 示例
属性:
<v-data-table@update:options="optionsChanged"...
>
</v-data-table>vue methods:
{optionsChanged() {} //options项改变触发函数,本例中触发函数,为向后端重新请求数据...
}
5、结语
- vuetify官网地址:
小结:vuetify表格组件多尝试之后,简单易用,顺便提示英语水平。
刚开始学习vuetify ui组件,如有错误之处欢迎指正,共同进步,本人QQ:806797785。
更多推荐
vuetify 学习第一天之v
发布评论