Datatable 数据表格

数据表格，用于展现大量结构化数据。

何时使用

  • 当有大量结构化的数据需要展现时；
  • 当需要对数据进行排序、分页、自定义操作等复杂行为时。
  • datatable内部默认使用flex布局，当外部容器使用固定高度或flex布局时，表格头部和底部会自动固定，中间区域自动滚动。
  • bottomGap属性已被废弃，建议使用flex布局实现相同效果。

代码演示

数据-datatable.json

  1.     {
  2.         "result":[
  3.             {
  4.                 "name": "高级动物",
  5.                 "time": "03:37",
  6.                 "singer": "窦唯",
  7.                 "album": "摇滚中国乐势力"
  8.             },
  9.             {
  10.                 "name": "谁伴我闯荡 - (电影《Beyond日记》插曲)",
  11.                 "time": "04:13",
  12.                 "singer": "Beyond",
  13.                 "album": "25周年精选"
  14.             },
  15.             .....
  16.         ],
  17.         "totalCount":11,
  18.         "pageSize":10,
  19.         "pageNo":1
  20.     }

树状表格

以树形结构显示的表格，需要开启tree-table属性，需要时还可配置treeTableOption。树状表格支持客户端自动分层和服务器异步加载两种模式，默认使用的客户端自动分层模式（不支持两种模式混用），只需在返回数据中指定每行数据的id值和pid关系，组件会自动组织层级关系并进行显示。

  1. <v-data-table :data='loadData' :columns='columns' tree-table></v-data-table>
  3. <script>
  4.     import axios from 'axios'
  5.     export default {
  6.         data: function () {
  7.             return {
  8.                 loadData(pramas) {
  9.                     return axios.get("static/datatable.json",pramas).then(res =>{
  10.                         return res.data;
  11.                     });
  12.                 },
  13.                 columns:[
  14.                     {title:"歌名",field:'name'},
  15.                     {title:"时长",field:'time'},
  16.                     {title:"歌手",field:'singer'},
  17.                     {title:"专辑",field:'album'},
  18.                 ]
  19.             }
  20.         },
  21.         methods:{
  23.         }
  24.     }
  25. </script>

异步树状表格

异步加载的树状，除了打开tree-table开关，还需要配置treeOption。其中的isAsync必须设置为true，还必须配置loadChildren函数（返回值为promise）。

  1. <v-data-table :data='loadData' :columns='columns' tree-table :tree-option='treeOption'></v-data-table>
  3. <script>
  4.     import axios from 'axios'
  5.     export default {
  6.         data: function () {
  7.             return {
  8.                 loadData(pramas) {
  9.                     return axios.get("static/datatable.json",pramas).then(res =>{
  10.                         return res.data;
  11.                     });
  12.                 },
  13.                 columns:[
  14.                     {title:"歌名",field:'name'},
  15.                     {title:"时长",field:'time'},
  16.                     {title:"歌手",field:'singer'},
  17.                     {title:"专辑",field:'album'},
  18.                 ],
  19.                 treeOption:{
  20.                     isAsync:true,
  21.                     loadChildren:function(pramas){
  22.                         return axios.get("static/children.json",pramas).then(res =>{
  23.                             return res.data;
  24.                         });
  25.                     }
  26.                 }
  27.         },
  28.         methods:{
  30.         }
  31.     }
  32. </script>

基本

最基本用法，配置好data和columns即可。

  1. <div style='height:300px;overflow: hidden;'>
  2.     <v-data-table :data='loadData' :columns='columns'></v-data-table>
  3. </div>
  5. <script>
  6.     import axios from 'axios'
  7.     export default {
  8.         data: function () {
  9.             return {
  10.                 loadData(pramas) {
  11.                     return axios.get("static/datatable.json",pramas).then(res =>{
  12.                         return res.data;
  13.                     });
  14.                 },
  15.                 columns:[
  16.                     {title:"歌名",field:'name'},
  17.                     {title:"时长",field:'time'},
  18.                     {title:"歌手",field:'singer'},
  19.                     {title:"专辑",field:'album'},
  20.                 ]
  21.             }
  22.         },
  23.         methods:{
  25.         }
  26.     }
  27. </script>

边框和斑马线

边框表格和斑马线效果

  1. <v-data-table :data='loadData' :columns='columns' stripe bordered></v-data-table>

显示html

在表头或表格中显示普通html内容。命名为th的slot表示表头作用域插槽，命名为td的slot表示单元格的作用域插槽。

  1. <v-data-table :data='loadData' :columns='columns' bordered>
  2.     <template slot="th" slot-scope="props">
  3.         <strong v-html="props.title"></strong>
  4.     </template>
  5.     <template slot="td" slot-scope="props">
  6.         <span v-html="props.content"></span>
  7.     </template>     
  8. </v-data-table>

特定列使用组件

在表头或表格中显示普通html内容。命名为th的slot表示表头作用域插槽，命名为td的slot表示单元格的作用域插槽。

  1. <v-data-table :data='loadData' :columns='columns' size="small" bordered>
  2.     <template slot="th" slot-scope="props">
  3.         <strong v-if="props.column.field=='album'">操作</strong>
  4.         <strong v-else v-html="props.title"></strong>
  5.     </template>
  6.     <template slot="td" slot-scope="props">
  7.         <div v-if="props.column.field=='album'">
  8.             <v-icon type="play-circle"></v-icon>
  9.             <v-icon type="download"></v-icon>
  10.             <v-icon type="link"></v-icon>
  11.             <v-icon type="heart-o"></v-icon>
  12.             <v-icon type="share-alt"></v-icon>
  13.         </div>
  14.         <span v-else v-html="props.content"></span>
  15.     </template>     
  16. </v-data-table>

固定高度

设置height属性即可。

  1. <v-data-table :data='loadData' :columns='columns' :height="300" bordered>
  3. </v-data-table>

固定列

设置fixedLeft，表示左侧固定几列。设置fixedRight，表示右侧固定几列。

  1. <v-data-table :data='loadData' :columns='longColumns' :fixed-left="1" :fixed-right="1">
  2.     <template slot="td" slot-scope="props">
  3.         <div v-if="props.column.field=='action'">
  4.             <v-icon type="play-circle"></v-icon>
  5.             <v-icon type="download"></v-icon>
  6.             <v-icon type="link"></v-icon>
  7.             <v-icon type="heart-o"></v-icon>
  8.             <v-icon type="share-alt"></v-icon>
  9.         </div>
  10.         <span v-else v-html="props.content"></span>
  11.     </template>    
  12. </v-data-table>

自适应高度

设置bottomGap，表示表格底部距离viewport底部的间距，进而实现表格自适应高度。为了保证表格数据可见，自适应计算的最小高度是200px。注意：bottomGap仅对第一屏显示的table有效果；height属性和bottomGap同时使用时，height属性优先。

  1. <v-data-table :data='loadData' :columns='columns' :bottom-gap="30">
  3. </v-data-table>

禁用分页

不显示分页组件

  1. <v-data-table :data='loadData' :columns='columns' :pagination="false">
  3. </v-data-table>

行选择和点击事件

选择行的事件演示；行点击的事件演示

  2. <v-alert v-if="checkAllMsg" :message="checkAllMsg"></v-alert>
  3. <v-alert v-if="clickRowMsg" :message="clickRowMsg"></v-alert>
  5. <v-data-table :data='loadData' :columns='columns' check-type="checkbox" @checkall="checkAll" @clickrow="clickRow" :current-data.sync='mydata'>
  7. </v-data-table>
  9. <script>
  10.     import axios from 'axios'
  11.     export default {
  12.         data: function () {
  13.             return {
  14.                 loadData(pramas) {
  15.                     return axios.get("static/datatable.json",pramas).then(res =>{
  16.                         return res.data;
  17.                     });
  18.                 },
  19.                 checkAllMsg:null,
  20.                 checkRowMsg:null,
  21.             }
  22.         },
  23.         methods:{
  24.             checkAll:function(value){
  25.                 this.checkAllMsg = "当前全选状态是："+value
  26.             },
  27.             clickRow:function(obj){
  28.                 console.log(obj);
  29.                 this.clickRowMsg = "当前点击第"+obj.index+"行";
  30.             }
  31.         }
  32.     }
  33. </script>

无数据时提示文案

无数据时显示的提示文案，可根据需要定制，使用名为emptytext的slot。

  2. <v-data-table :data='loadData' :columns='columns'>
  3.     <template slot="emptytext" slot-scope="props">
  4.         <v-tag color="orange">我去，这是几个意思？</v-tag>
  5.     </template>    
  6. </v-data-table>

调用API方法

可通过在datatable实例上调用API方法实现某些特定操作，如刷新数据。

  2. <v-data-table ref="xtable" :data='loadData' :columns='columns' :page-num="pageno" :current-data.sync='mydata'>
  4. </v-data-table>
  5. <br>
  6. <v-button @click="refreshTable">刷新表格</v-button>
  7. <v-button @click="reloadTable">重载表格</v-button>
  8. <v-button @click="go2">跳转到第二页</v-button>
  9. <v-button @click="edit">修改当前数据</v-button>
  10. <script>
  11.     import axios from 'axios'
  12.     export default {
  13.         data: function () {
  14.             return {
  15.                 loadData(pramas) {
  16.                     return axios.get("static/datatable.json",pramas).then(res =>{
  17.                         return res.data;
  18.                     });
  19.                 },
  20.                 mydata: [],
  21.                 pageno:1
  22.             }
  23.         },
  24.         methods:{
  25.             refreshTable:function(){
  26.                 this.$refs.xtable.refresh();
  27.             },
  28.             reloadTable:function(){
  29.                 this.$refs.xtable.reload();
  30.             },
  31.             go2:function(){
  32.                 this.$refs.xtable.goto(2);
  33.             },
  34.             edit:function(){
  35.                 this.mydata = [
  36.                     {
  37.                       "name": "无地自容",
  38.                       "time": "05:40",
  39.                       "singer": "黑豹乐队",
  40.                       "album": "黑豹1"
  41.                     },
  42.                     {
  43.                       "name": "无地自容",
  44.                       "time": "05:40",
  45.                       "singer": "黑豹乐队",
  46.                       "album": "黑豹1"
  47.                     },
  48.                     ......
  49.                 ];
  50.             }
  51.         }
  52.     }
  53. </script>

API

Datatable Props

参数说明类型默认值
data获取表格数据的函数，初始化必需参数，返回值必须是Promise对象,该函数默认接收一个请求参数，参数构造请见data argumentsFunction-
currentData.sync表格当前数据,业务开发中也可以直接修改currentData,从而重新渲染表格（仅推荐用于客户端排序、数据过滤等场景）Array[]
bordered是否展示外边框和列边框Booleanfalse
stripe是否显示间隔斑马纹Booleanfalse
size尺寸，large、smallStringlarge
columns表头配置，类型为对象数据，具体请见下表：Columns ObjectArray-
pagination是否启用分页Booleanfalse
pageSize分页大小Number10
pageNum当前页数Number1
pageSizeOptions分页大小可选参数Array[10, 20, 30, 40, 50]
checkType选择框类型'checkbox'或'radio'-
height表格高度，注意是指表格整体高度（包含表头、表格和底部分页）Number-
bottomGap距离viewport底部的间隙距离Number-
responseParamsName接口数据的关键字段命名，目前支持total和results,分别表示总数字段和结果字段Object{total:'totalCount',results: 'result'}
rowClickChecked点击表格行是否选中checkboxBooleanfalse
fixedLeft左侧固定列数Number0
fixedRight右侧固定列数Number0
treeTable是否启用树状表格Booleanfalse
emptyText没有数据时的提示String老板,没有找到你想要的信息……
treeOption树状表格配置Object{idKey: "id",pidKey: "pid",indent: 4,position: 0,sortKey: null, order: "asc",isAsync: false,loadChildren: null}

currentData与checked状态说明

currentData返回当前表格数据，需要使用sync修饰符保持双向同步，在翻页、点击checkbox、点击全选按钮时会更新，其中包含每行的checked状态，具体对应字段为vb_dt_checked,获取方法为currentData[index]['vb_dt_checked']。

data arguments

参数说明类型默认值
pageNo页数Number-
pageSize分页大小Number10
sortColumns排序列'field order field order'false

Columns Object

参数说明类型默认值
title列名String-
field字段名（对应data中的字段名）String-
sort是否排序Booleanfalse
width列宽合法的CSS尺寸,如120px或5%-
className自定义类名String-

treeOption

参数说明类型默认值
idKey数据项中的id主键名String'id'
pidKey数据项中的pid主键名String'pid'
indent子节点显示缩进距离(12px为1单位)Number4
position折叠按钮显示列(以0开头，checkbox列不算)Number0
sortKey数据排序字段（在客户端分层模式下，您可能需要对数据显示做排序）String''
order排序方式，配合sortKey使用'asc'或'desc''asc'
isAsync是否异步加载子节点Booleanfalse
loadChildren加载子节点的函数，返回值必须是promise，该函数默认接收一个请求参数，参数构造请见loadChildren argumentsFunctionnull

loadChildren arguments

参数说明类型默认值
parentidparent id值Number-
sortColumns排序列'field order field order'false

th Slot Props

参数说明类型默认值
cindex当前列索引Number-
column当前列对象Object-
title当前列标题String-

td Slot Props

参数说明类型默认值
index当前行索引Number-
cindex当前列索引Number-
column当前列对象Object-
content当前单元格内容String-
item当前行内容对象Object-

emptytext Slot

暂无参数

footerinfo Slot Props

参数说明类型默认值
total数据总条数Number-
pageNumber当前页数Number-

Datatable Events

事件说明参数参数说明
checkall全选时触发value是否选中，布尔值
clickrow点击某一行时触发object{index:选中行的索引,checked:是否选中,row:行数据}
dataloaded数据加载完成后触发（初始化和翻页都会触发）Array加载成功的数据

Datatable Methods

method说明参数参数说明返回值
refresh刷新表格数据（使用datatable的当前参数）---
reload重新加载数据（重置到第一页）---
goto跳转页数pageNumber:number页数-
getCheckedData获取被选中的数据集合---
setChecked设置选中状态index:number,status:boolean索引，状态-
fixHeaderWidth该方法用于修正表头宽度，用于特定情况下表头宽度不正确的情况（数据变化后组件默认会自动重新计算）---