Table 表格
用于展示多条结构类似的数据，可对数据进行排序或其他自定义操作
基础表格
基础表格用于展示信息列表，随屏幕宽度进行自适应调节
使用 columns 属性指定所有列，datasource 绑定表格展现信息
<c-table
:size="size"
:columns="columns"
:datasource="datasource1"
:rowClassName="getRowClassName"
noresultMsg="暂无相关数据"
/>
<c-button
@click.native="changeData()"
>获取数据</c-button>
<script>
export default {
data () {
return {
size: 'sm',
datasource1: [],
datasource: [
{
type: '直接访问',
pv: 1,
uv: 2,
nv: 3,
du: 4,
cv: 5,
ip: 8
}, {
type: '搜索引擎',
pv: 11,
uv: 21,
nv: 31,
du: 141,
cv: 51,
ip: 81
}
],
columns: [
{ title: '来源类型', key: 'type', align: 'center', width: '20%' },
{ title: '浏览量', key: 'pv', className: 'test' },
{ title: '访客数', key: 'uv' },
{ title: '新访客数', key: 'nv' },
{ title: '访问时长', key: 'du' },
{ title: '转化次数', key: 'cv' },
{ title: 'IP 数', key: 'ip', align: 'right ' }
]
}
},
methods: {
getRowClassName (rowItem, rowIndex) {
return 'test--row'
},
changeData () {
this.datasource1 = this.datasource
}
}
}
</script>
可选择的表格
在 columns设置第一列的type为selection， 即可支持第一列展现可选框, 数据中通过disabled字段可以控制数据
<c-table
:columns="columns"
border="vertical"
:datasource="datasource"
:allSelected="allSelected"
@selectChange="onSelectChange"
/>
<p/>
<c-button
@click.native="updateData()"
>更新数据
</c-button>
<c-button
@click.native="allSelected = !allSelected"
>修改全选状态
</c-button>
<c-button
@click="resetData()"
>重置数据
</c-button>
<script>
export default {
data () {
return {
allSelected: false,
datasource: [],
data: [
{
type: '直接访问',
_disabled: true,
_checked: true,
pv: 1,
uv: 2,
nv: 3,
du: 4,
cv: 5,
ip: 8
}, {
type: '搜索引擎',
pv: 11,
uv: 21,
nv: 31,
du: 141,
cv: 51,
ip: 81
}
],
datasource1: [
{
type: '直接访问1',
pv: 1,
uv: 2,
nv: 3,
du: 4,
cv: 5,
ip: 8
}, {
type: '搜索引擎1',
_disabled: true,
pv: 11,
uv: 21,
nv: 31,
du: 141,
cv: 51,
ip: 81
}
],
columns: [
{ type: 'selection', align: 'center', width: 60 },
{ title: '来源类型', key: 'type' },
{ title: '浏览量', key: 'pv' },
{ title: '访客数', key: 'uv' },
{ title: '转化次数', key: 'cv' },
{ title: 'IP 数', key: 'ip' }
]
}
},
created () {
this.datasource = this.data
},
methods: {
onSelectChange (selection) {
console.log(selection)
},
updateData () {
this.datasource = this.datasource1
},
resetData () {
this.datasource = []
}
}
}
</script>
自定义单元格内容
通过 render 进行函数定义返回单元格的内容，也可以通过 Scoped Slots 特性来获取数据进行其他的交互
<template>
<c-table
:columns="columns"
:datasource="datasource"
:sortkey="sortKey"
border="all"
:sortorder="sortOrder"
@sort="sorter"
>
<template slot="opt-td" slot-scope="props">
<div class="c-table__opt">
<a href="javascript:;" @click="showIp(props)"> 查看ip
</a>
</div>
</template>
</c-table>
</template>
<script>
export default {
data () {
return {
sortKey: 'pv',
sortOrder: 'asc',
datasource: [
{
type: '直接访问',
pv: 1,
uv: 2,
nv: 3,
du: 4,
cv: 5,
ip: 8
}, {
type: '搜索引擎',
pv: 11,
uv: 21,
nv: 31,
du: 141,
cv: 51,
ip: 81
}
],
columns: [
{
title: '来源类型',
width: 200,
key: 'type',
render(index, value, item) {
return `<a href="#">${value}</a>`
}
},
{ title: '浏览量', key: 'pv', sorter: true },
{ title: '访客数', key: 'uv', sorter: true },
{ title: '新访客数', key: 'nv', sorter: true },
{ title: '访问时长', key: 'du' },
{ title: '转化次数', key: 'cv' },
{ title: 'IP 数', key: 'ip' },
{ title: '操作', key: 'opt' }
]
}
},
methods: {
showIp (props) {
console.log(props)
alert('ip 为 ' + props.item.ip + '行号：' + props.rowIndex)
},
sorter (sortObj) {
this.sortKey = sortObj.key
this.sortOrder = sortObj.order
this.datasource = this.datasource.sort((a,b) => {
return this.sortOrder === 'asc' ? a[this.sortKey] - b[this.sortKey]
: b[this.sortKey] - a[this.sortKey]
})
}
}
}
</script>
多级表头
对于结构复杂的数据可以使用多级表头来展现，更好的体现数据的层级关系
<c-table
:sortkey="sortKey"
:sortorder="sortOrder"
:columns="columns"
:datasource="datasource"
border="group"
@sort="sorter"
/>
<script>
export default {
data () {
return {
sortKey: 'pv',
sortOrder: 'asc',
datasource: [
{
type: '直接访问',
pv: 1,
uv: 2,
nv: 3,
du: 4,
cv: 5,
ip: 8
}, {
type: '搜索引擎',
pv: 11,
uv: 21,
nv: 31,
du: 141,
cv: 51,
ip: 81
}
],
columns: [
{ title: '来源类型', key: 'type' },
{ title: '基础流量',
key: '',
children: [
{ title: '浏览量', key: 'pv', sorter: true },
{ title: '访客数', key: 'uv',
children: [
{ title: '转化次数', key: 'cv' },
{ title: 'IP 数', key: 'ip' }]
},
{ title: '新访客数', key: 'nv', sorter: true },
{ title: '访问时长', key: 'du',
children: [
{ title: '转化次数', key: 'cv' },
{ title: 'IP 数', key: 'ip' }]
},
{ title: '转化次数', key: 'cv' },
{ title: 'IP 数', key: 'ip' }
]
}
]
}
},
methods: {
sorter (sortObj) {
this.sortKey = sortObj.key
this.sortOrder = sortObj.order
this.datasource = this.datasource.sort((a,b) => {
return this.sortOrder === 'asc' ? a[this.sortKey] - b[this.sortKey]
: b[this.sortKey] - a[this.sortKey]
})
}
}
}
</script>
列固定
对于结构复杂的数据可以使用列固定来展现重要信息，需要在columns中指定每列的宽度，其他数据可以滑动查看
<c-table
:columns="columns"
border="horizon"
:datasource="datasource"
/>
<script>
export default {
data () {
return {
datasource: [
{
type: '直接访问',
pv: 1,
uv: 2,
nv: 3,
du: 4,
cv: 5,
ip: 8
}, {
type: '搜索引擎',
pv: 11,
uv: 21,
nv: 31,
du: 141,
cv: 51,
ip: 81
}
],
columns: [
{ title: '来源类型', key: 'type', fixed: 'left', width: 150},
{ title: '浏览量', key: 'pv', fixed: 'left', width: 150 },
{ title: '访客数', key: 'uv', width: 200 },
{ title: '新访客数', key: 'nv', width: 200 },
{ title: '访问时长', key: 'du', width: 200 },
{ title: '转化次数', key: 'cv', width: 200 },
{ title: 'IP 数', key: 'ip', fixed: 'right', width: 100 }
]
}
}
}
</script>
表头固定
对于数目较多的数据可以使用表头固定来展现数据信息，需要在组件中传递表格的高度
| 直接访问 | 1 | 2 | 3 | 8 |
| 搜索引擎 | 11 | 21 | 31 | 81 |
| 直接访问 | 1 | 2 | 3 | 8 |
| 搜索引擎 | 11 | 21 | 31 | 81 |
| 直接访问 | 1 | 2 | 3 | 8 |
| 搜索引擎 | 11 | 21 | 31 | 81 |
<c-table
:columns="columns"
height="200"
border="horizon"
:datasource="datasource"
/>
<script>
export default {
data () {
return {
datasource: [
{
type: '直接访问',
pv: 1,
uv: 2,
nv: 3,
du: 4,
cv: 5,
ip: 8
}, {
type: '搜索引擎',
pv: 11,
uv: 21,
nv: 31,
du: 141,
cv: 51,
ip: 81
},
{
type: '直接访问',
pv: 1,
uv: 2,
nv: 3,
du: 4,
cv: 5,
ip: 8
}, {
type: '搜索引擎',
pv: 11,
uv: 21,
nv: 31,
du: 141,
cv: 51,
ip: 81
},{
type: '直接访问',
pv: 1,
uv: 2,
nv: 3,
du: 4,
cv: 5,
ip: 8
}, {
type: '搜索引擎',
pv: 11,
uv: 21,
nv: 31,
du: 141,
cv: 51,
ip: 81
}
],
columns: [
{ title: '来源类型', key: 'type', width: 150},
{ title: '浏览量', key: 'pv', width: 150 },
{ title: '访客数', key: 'uv', width: 200 },
{ title: '新访客数', key: 'nv', width: 200 },
{ title: 'IP 数', key: 'ip', width: 100 }
]
}
}
}
</script>
表头和列都固定
对于数目较多的数据可以使用表头固定，重要的列固定来展现数据信息
| 直接访问 | 1 | 2 | 3 | 4 | 5 | 8 |
| 搜索引擎 | 11 | 21 | 31 | 141 | 51 | 81 |
| 直接访问 | 1 | 2 | 3 | 4 | 5 | 8 |
| 搜索引擎 | 11 | 21 | 31 | 141 | 51 | 81 |
| 直接访问 | 1 | 2 | 3 | 4 | 5 | 8 |
| 搜索引擎 | 11 | 21 | 31 | 141 | 51 | 81 |
<c-table
:columns="columns"
height="200"
border="horizon"
:datasource="datasource"
/>
<p />
<button @click="changeColumns()"> changeColumns
</button>
<script>
export default {
methods: {
changeColumns () {
this.change = !this.change
}
},
computed: {
columns () {
return this.change ? [
{ title: '来源类型', key: 'type', width: 150},
{ title: '浏览量', key: 'pv', width: 150 },
{ title: '访客数', key: 'uv', width: 100 },
{ title: '新访客数', key: 'nv', width: 100 },
{ title: '访问时长', key: 'du', width: 200 },
{ title: '转化次数', key: 'cv', width: 200 },
{ title: 'IP 数', key: 'ip', width: 100 }
] : [
{ title: '来源类型', key: 'type', width: 150, fixed: 'left'},
{ title: '浏览量', key: 'pv', width: 150 },
{ title: '访客数', key: 'uv', width: 200 },
{ title: '新访客数', key: 'nv', width: 200 },
{ title: '访问时长', key: 'du', width: 200 },
{ title: '转化次数', key: 'cv', width: 200 },
{ title: 'IP 数', key: 'ip', fixed: 'right', width: 100 }
]
}
},
data () {
return {
change: false,
datasource: [
{
type: '直接访问',
pv: 1,
uv: 2,
nv: 3,
du: 4,
cv: 5,
ip: 8
}, {
type: '搜索引擎',
pv: 11,
uv: 21,
nv: 31,
du: 141,
cv: 51,
ip: 81
},
{
type: '直接访问',
pv: 1,
uv: 2,
nv: 3,
du: 4,
cv: 5,
ip: 8
}, {
type: '搜索引擎',
pv: 11,
uv: 21,
nv: 31,
du: 141,
cv: 51,
ip: 81
},{
type: '直接访问',
pv: 1,
uv: 2,
nv: 3,
du: 4,
cv: 5,
ip: 8
}, {
type: '搜索引擎',
pv: 11,
uv: 21,
nv: 31,
du: 141,
cv: 51,
ip: 81
}
]
}
}
}
</script>
多级表头固定, 列固定
对于结构复杂的数据可以使用多级表头来展现，更好的体现数据的层级关系
| 直接访问 | 1 | 3 | 5 | 8 | 1 | 5 | 8 | 3 | 5 | 8 | 5 | 8 |
| 搜索引擎 | 11 | 31 | 51 | 81 | 11 | 51 | 81 | 31 | 51 | 81 | 51 | 81 |
| 直接访问2 | 1 | 3 | 5 | 8 | 1 | 5 | 8 | 3 | 5 | 8 | 5 | 8 |
| 4搜索引擎 | 11 | 317 | 51 | 81 | 11 | 51 | 81 | 317 | 51 | 81 | 51 | 81 |
<c-table
:columns="columns"
height="200"
:datasource="datasource"
border="group"
/>
<script>
export default {
data () {
return {
datasource: [
{
type: '直接访问',
pv: 1,
uv: 2,
nv: 3,
du: 4,
cv: 5,
ip: 8
}, {
type: '搜索引擎',
pv: 11,
uv: 21,
nv: 31,
du: 141,
cv: 51,
ip: 81
}, {
type: '直接访问2',
pv: 1,
uv: 22,
nv: 3,
du: 4,
cv: 5,
ip: 8
}, {
type: '4搜索引擎',
pv: 11,
uv: 215,
nv: 317,
du: 141,
cv: 51,
ip: 81
}
],
columns: [
{ title: '来源类型', key: 'type', width: 200, fixed: 'left' },
{ title: '基础流量1',
key: '',
children: [
{ title: '浏览量', key: 'pv', width: 200 },
{ title: '新访客数', key: 'nv', width: 200 },
{ title: '访问时长', key: 'du',
children: [
{ title: '转化次数', key: 'cv', width: 200 },
{ title: 'IP 数', key: 'ip', width: 200 }]
},
]
}, { title: '基础流量',
key: '',
children: [
{ title: '浏览量', key: 'pv', width: 200 },
{ title: '访客数', key: 'uv',
children: [
{ title: '转化次数', key: 'cv', width: 200 },
{ title: 'IP 数', key: 'ip', width: 200 }]
},
{ title: '新访客数', key: 'nv', width: 200 },
{ title: '访问时长', key: 'du',
children: [
{ title: '转化次数', key: 'cv', width: 200 },
{ title: 'IP 数', key: 'ip', width: 200 }]
},
{ title: '转化次数', key: 'cv', width: 200 },
{ title: 'IP 数', key: 'ip', width: 200 }
]
}
]
}
}
}
</script>
合并单元格
<c-table
border="all"
:size="size"
:columns="columns"
:datasource="datasource"
:rowClassName="getRowClassName"
noresultMsg="暂无相关数据"
:spanMethod="rowspanMethod"
/>
<hr>
<c-table
border="all"
:size="size"
:columns="columns"
:datasource="datasource"
:rowClassName="getRowClassName"
noresultMsg="暂无相关数据"
:spanMethod="spanMethod"
/>
<script>
export default {
data () {
return {
size: 'sm',
datasource: [
{
type: '直接访问',
pv: 1,
uv: 2,
nv: 3,
du: 4,
cv: 5,
ip: 8
}, {
type: '搜索引擎',
pv: 11,
uv: 21,
nv: 31,
du: 141,
cv: 51,
ip: 81
}
],
columns: [
{ title: '来源类型', key: 'type', align: 'center', width: '20%' },
{ title: '浏览量', key: 'pv', className: 'test' },
{ title: '访客数', key: 'uv' },
{ title: '新访客数', key: 'nv' },
{ title: '访问时长', key: 'du' },
{ title: '转化次数', key: 'cv' },
{ title: 'IP 数', key: 'ip', align: 'right ' }
]
}
},
methods: {
getRowClassName (rowItem, rowIndex) {
return 'test--row'
},
rowspanMethod (row, column, rowIndex, columnIndex) {
if (rowIndex % 2 === 0) {
if (columnIndex === 1) {
return [1, 2];
} else if (columnIndex === 2) {
return [0, 0];
}
}
},
spanMethod (row, column, rowIndex, columnIndex) {
if (columnIndex === 0) {
if (rowIndex % 2 === 0) {
return {
rowspan: 2,
colspan: 1
}
} else {
return {
rowspan: 0,
colspan: 0
}
}
}
}
}
}
</script>
可展开表格
有的时候数据较多，不能在一行中完全展现，可以展开查看其他信息,
在 columns设置第一列的type为expand， 即可支持第一列展现折叠展现按钮,
在数据中设置_showExpand为true时，默认展开
注：这种方式不支持列固定fixed
<style scoped>
p {
text-align: center;
}
</style>
<c-table
border="all"
:columns="columns"
:datasource="datasource"
:expand="hasExpand"
@openExpand="openExpand"
>
<p slot="expand" slot-scope="props">
32324--{{props.row.type}}
</p>
</c-table>
<script>
export default {
methods: {
openExpand (item, index) {
alert(index)
console.log(item)
}
},
data () {
return {
hasExpand: true,
datasource: [
{
type: '直接访问',
pv: 1,
uv: 2,
nv: 3,
du: 4,
cv: 5,
ip: 8,
_showExpand: true
}, {
type: '搜索引擎',
pv: 11,
uv: 21,
nv: 31,
du: 141,
cv: 51,
ip: 81
}
],
columns: [
{ type: 'expand', align: 'center', width: 60},
{ title: '来源类型', key: 'type', align: 'center', width: '20%' },
{ title: '浏览量', key: 'pv', className: 'test' },
{ title: '访客数', key: 'uv' },
{ title: '新访客数', key: 'nv' },
{ title: '访问时长', key: 'du' },
{ title: '转化次数', key: 'cv' },
{ title: 'IP 数', key: 'ip', align: 'right ' }
]
}
}
}
</script>
API
注意： 在 columns设置第一列的type为selection， 即可支持第一列展现可选框；横向或者纵向出现滚动条时需要设置单元格的宽度，否则无法保证表头和内容的对齐性
columns
| 属性 | 类型 | 默认值 | 说明 |
|---|
| key | String | - | - |
| title | String | - | 表头展现 |
| width | Number, String | - | number 会自动转化为像素，string 会直接用来展现 |
| className | String | - | 列的类名 |
| fixed | String | - | 可以设置 left，right 进行定位 |
| sorter | Boolean | false | 是否支持排序 |
属性
| 属性 | 类型 | 默认值 | 说明 |
|---|
| columns | Object | {} | 详情见上表 |
| datasource | Array | [] | 数据源 |
| border | String | 'none' | all:全边框，horizon:水平边框，vertical:垂直边框，box: 仅有外边框，group：针对多级表头分组边框 |
| height | Number | - | 设置为具体的值，tbody 出滚动条 |
| sortKey | String | - | 默认排序的 key |
| sortOrder | String | - | 默认排序的升降顺序：asc 和 desc |
| rowClassName | Function | function(rowItem: Object, rowIndex: Number) | 设置行的类名 |
| noresultMsg | String | 暂无数据 | 可以自定义无数据时显示文案 |
方法
| 参数 | 类型 | 默认值 | 说明 |
|---|
| selectChange | Function | function(selection: Array) | checkbox 勾选后触发，返回已勾选的数组 |
| sort | Function | function(sortObj: Object) | 排序按钮点击触发，返回{key, order} |
| rowEnter | Function | function(index： Number) | 行进入事件 |
| rowLeave | Function | - | 行离开事件 |
