vuetify 学习第一天之v-data-table_表格组件

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、事件


内容

  示例如下:
vuetify 学习第一天之v-data-table_表格组件_第1张图片
  使用前端框架vue,用vue-cli脚手架搭建的环境,版本为当前最新版本。

组件 版本
vue-cli v4.0.5
vue v2.6.10
vuetify v2.1.15

1、简介

  v-data-table 组件用于显示列表数据,特色有排序,搜索,分页,单元格编辑,表头和行选择。

  由于现在表格数据大部分情况下都是来自于后端请求,这里着重讲解服务端数据渲染。纯前端数据渲染,自行查阅官网,官网地址:https://vuetifyjs.com/en/components/data-tables

2、常用属性

  • 页面源代码:







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					// 是否可以排序,默认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 指定的列是否可以排序,默认可以排序

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": "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属性为表格要渲染的数据,通常为服务端返回数据,格式与表头配置一一对应,
那么数据会自动渲染到响应的列

2.2.3 、options

  • 示例:
通用配置:
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属性配置,不过通常一起配置,效率高

2.2.4、server-items-length

  • 示例:
属性:


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

  • 示例:
属性:



vue data:
{
	loading: true
	...
}

  • 详解:
名称 类型 默认值 描述
loading boolean false 当设置为true 且没有数据渲染的时候,表头下面显示加载条

3、插槽

  • v-data-table 插槽一般用来定制某一列,比如修改删除操作,根据路径渲染成图片等等

添加操作列示例:

本例操作列:


  • 详解

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 配置中数据改变触发
  • 示例
属性:



vue methods:
{
	optionsChanged() {} //options项改变触发函数,本例中触发函数,为向后端重新请求数据
	...
}

## 5、结语
+ vuetify官网地址:



***小结***:vuetify表格组件多尝试之后,简单易用,顺便提示英语水平。

刚开始学习vuetify ui组件,如有错误之处欢迎指正,共同进步,本人QQ:806797785。

你可能感兴趣的:(#,vuetify,前端,#,vue)