Table
<template>
<fish-table :columns="columns" :data="data"></fish-table>
</template>
<script>
export default {
name: 'demo-table-base',
data () {
return {
columns: [{title: 'Name', key: 'name'},
{title: 'age', key: 'age'},
{title: 'Address', key: 'address'},
{title: 'Operate',
key: 'operate',
render: (h, record, column) => h('a', '编辑')}],
data: [
{name: 'yanbin.hu', age: 32, address: 'haidi part 1, xihu, Hangzhou'},
{name: 'yanzu.wu', age: 35, address: 'haidi part 5, xihu, Hangzhou'},
{name: 'yanzu.wu', age: 35, address: 'haidi part 5, xihu, Hangzhou'},
{name: 'yanzu.wu', age: 35, address: 'haidi part 5, xihu, Hangzhou'}
]
}
}
}
</script>
<template>
<fish-table :columns="columns" :data="data" noMoreText="no more data>>>"></fish-table>
</template>
<script>
export default {
name: 'demo-table-no-more',
data () {
return {
columns: [{title: 'Name', key: 'name'},
{title: 'age', key: 'age'},
{title: 'Address', key: 'address'},
{title: 'Operate',
key: 'operate',
render: (h, record, column) => h('a', '编辑')}],
data: []
}
}
}
</script>
<template>
<fish-table :columns="columns" :data="data" @change="changeHandler"></fish-table>
</template>
<script>
export default {
name: 'demo-table-column-order',
data () {
const data = [
{name: 'a.hu', age: 32, address: 'haidi part 1, xihu, Hangzhou'},
{name: 'b.wu', age: 33, address: 'haidi part 5, xihu, Hangzhou'},
{name: 'c.wu', age: 34, address: 'haidi part 5, xihu, Hangzhou'},
{name: 'd.wu', age: 35, address: 'haidi part 5, xihu, Hangzhou'}
]
return {
columns: [
{title: '#', type: 'index', width: '50', align: 'center'},
{title: 'Name', key: 'name', sortable: true},
{title: 'age', key: 'age', filters: [{label: '32岁', value: 32}], sortable: true},
{title: 'Address', key: 'address'}
],
data,
oldData: data
}
},
methods: {
changeHandler (pagination, filters, sorter) {
let nData = this.oldData
for (let key of Object.keys(filters)) {
nData = nData.filter((item) => filters[key].includes(item[key]))
}
if (sorter) {
nData.sort((a, b) => {
let bv = b[sorter.key] + ''
let av = a[sorter.key] + ''
return sorter.by === 'desc' ? bv.localeCompare(av) : av.localeCompare(bv)
})
}
this.data = nData
}
}
}
</script>
<template>
<fish-table :columns="columns" :data="data" :pagination="page"></fish-table>
</template>
<script>
export default {
name: 'demo-table-pagination',
data () {
return {
page: {total: 15, current: 1},
columns: [{title: 'Name', key: 'name'},
{title: 'age', key: 'age'},
{title: 'Address', key: 'address'},
{title: 'Operate',
key: 'operate',
render: (h, record, column) => h('a', '编辑')}],
data: [
{name: 'yanbin.hu', age: 32, address: 'haidi part 1, xihu, Hangzhou'},
{name: 'yanzu.wu', age: 35, address: 'haidi part 5, xihu, Hangzhou'},
{name: 'yanzu.wu', age: 35, address: 'haidi part 5, xihu, Hangzhou'},
{name: 'yanzu.wu', age: 35, address: 'haidi part 5, xihu, Hangzhou'}
]
}
}
}
</script>
<template>
<fish-table :columns="columns" :data="data" @select="selectHandler"></fish-table>
</template>
<script>
export default {
name: 'demo-table-column-type',
data () {
return {
columns: [
{title: '#', type: 'index', width: '50', align: 'center'},
{title: '', key: 'name', type: 'checkbox', width: '50', align: 'center'},
{title: 'Name', key: 'name'},
{title: 'age', key: 'age'},
{title: 'Address', key: 'address'}
],
data: [
{name: 'yanbin.hu', age: 32, address: 'haidi part 1, xihu, Hangzhou'},
{name: 'yanzu.wu', age: 35, address: 'haidi part 5, xihu, Hangzhou'},
{name: 'yanzu.wu', age: 35, address: 'haidi part 5, xihu, Hangzhou'},
{name: 'yanzu.wu', age: 35, address: 'haidi part 5, xihu, Hangzhou'}
]
}
},
methods: {
selectHandler (selectedItems) {
console.log('selectedItems:', selectedItems)
}
}
}
</script>
<template>
<fish-table :columns="columns" :data="data" @change="changeHandler"></fish-table>
</template>
<script>
export default {
name: 'demo-table-column-filters',
data () {
const data = [
{name: 'yanbin.hu', age: 32, address: 'haidi part 1, xihu, Hangzhou'},
{name: 'yanzu.wu', age: 35, address: 'haidi part 5, xihu, Hangzhou'},
{name: 'yanzu.wu', age: 35, address: 'haidi part 5, xihu, Hangzhou'},
{name: 'yanzu.wu', age: 35, address: 'haidi part 5, xihu, Hangzhou'}
]
return {
columns: [
{title: '#', type: 'index', width: '50', align: 'center'},
{title: 'Name', key: 'name'},
{title: 'age', key: 'age', filters: [{label: '32岁', value: 32}, {label: '35岁', value: 35}]},
{title: 'Address', key: 'address'}
],
data,
oldData: data
}
},
methods: {
changeHandler (pagination, filters) {
let nData = this.oldData
for (let key of Object.keys(filters)) {
nData = nData.filter((item) => filters[key].includes(item[key]))
}
this.data = nData
console.log('pagination:', pagination, ', filters:', filters)
}
}
}
</script>
<template>
<fish-table :columns="columns" :data="data" border></fish-table>
</template>
<script>
export default {
name: 'demo-table-border',
data () {
return {
columns: [{title: 'Name', key: 'name'}, {title: 'age', key: 'age'}, {title: 'Address', key: 'address'}],
data: [
{name: 'yanbin.hu', age: 32, address: 'haidi part 1, xihu, Hangzhou'},
{name: 'yanzu.wu', age: 35, address: 'haidi part 5, xihu, Hangzhou'},
{name: 'yanzu.wu', age: 35, address: 'haidi part 5, xihu, Hangzhou'},
{name: 'yanzu.wu', age: 35, address: 'haidi part 5, xihu, Hangzhou'}
]
}
}
}
</script>
<template>
<fish-table :columns="columns" :data="data" :expandedRowRender="(h, record)=> h('fish-button', JSON.stringify(record))"></fish-table>
</template>
<script>
export default {
name: 'demo-table-expand',
data () {
return {
columns: [{title: 'Name', key: 'name'}, {title: 'age', key: 'age'}, {title: 'Address', key: 'address'}],
data: [
{name: 'yanbin.hu', age: 32, address: 'haidi part 1, xihu, Hangzhou'},
{name: 'yanzu.wu', age: 35, address: 'haidi part 5, xihu, Hangzhou'},
{name: 'yanzu.wu', age: 35, address: 'haidi part 5, xihu, Hangzhou'},
{name: 'yanzu.wu', age: 35, address: 'haidi part 5, xihu, Hangzhou'}
]
}
}
}
</script>
<template>
<fish-table :columns="columns" :data="data" border height="200"></fish-table>
</template>
<script>
export default {
name: 'demo-table-fixed-header',
data () {
return {
columns: [
{title: 'Date', key: 'date'},
{
title: 'Delivery',
children: [
{title: 'Name', key: 'name'},
{
title: 'Address',
children: [
{title: 'Province', key: 'province'},
{title: 'City', key: 'city'},
{title: 'Address', key: 'address'},
{title: 'Postcode', key: 'zip'}
]
}
]
}
],
data: [
{date: '2016-05-03', name: 'xiaohu.wang', province: 'Shanghai', city: 'Putuo',
address: 'Shanghai City Putuo jinshajing 1518 ', zip: 200333},
{date: '2016-05-02', name: 'xiaohu.wang', province: 'Shanghai', city: 'Putuo',
address: 'Shanghai City Putuo jinshajing 1518 ', zip: 200333},
{date: '2016-05-04', name: 'xiaohu.wang', province: 'Shanghai', city: 'Putuo',
address: 'Shanghai City Putuo jinshajing 1518 ', zip: 200333},
{date: '2016-05-01', name: 'xiaohu.wang', province: 'Shanghai', city: 'Putuo',
address: 'Shanghai City Putuo jinshajing 1518 ', zip: 200333},
{date: '2016-05-08', name: 'xiaohu.wang', province: 'Shanghai', city: 'Putuo',
address: 'Shanghai City Putuo jinshajing 1518 ', zip: 200333},
{date: '2016-05-06', name: 'xiaohu.wang', province: 'Shanghai', city: 'Putuo',
address: 'Shanghai City Putuo jinshajing 1518 ', zip: 200333},
{date: '2016-05-07', name: 'xiaohu.wang', province: 'Shanghai', city: 'Putuo',
address: 'Shanghai City Putuo jinshajing 1518 ', zip: 200333}
]
}
}
}
</script>
<template>
<fish-table :columns="columns" :data="data"></fish-table>
</template>
<script>
export default {
name: 'demo-table-scroll-y',
data () {
return {
columns: [
{title: 'Date', key: 'date', width: '200'},
{title: 'Name', key: 'name', width: '200'},
{title: 'Sex', key: 'sex', width: '200'},
{title: 'birthDate', key: 'birthDate', width: '200'},
{title: 'University', key: 'university', width: '300'},
{title: 'Province', key: 'province', width: '200'},
{title: 'City', key: 'city', width: '200'},
{title: 'Address', key: 'address', width: '300'},
{title: 'Postcode', key: 'zip', width: '200'}],
data: [
{date: '2016-05-03', name: 'xiaohu.wang', sex: 'male', birthDate: '2001-01-01',
university: 'Beijing University', province: 'Shanghai', city: 'Putuo', address: 'Shanghai City Putuo jinshajing 1518 ', zip: 200333},
{date: '2016-05-02', name: 'xiaohu.wang', sex: 'male', birthDate: '2001-01-01',
university: 'Beijing University', province: 'Shanghai', city: 'Putuo', address: 'Shanghai City Putuo jinshajing 1518 ', zip: 200333},
{date: '2016-05-04', name: 'xiaohu.wang', sex: 'male', birthDate: '2001-01-01',
university: 'Beijing University', province: 'Shanghai', city: 'Putuo', address: 'Shanghai City Putuo jinshajing 1518 ', zip: 200333},
{date: '2016-05-01', name: 'xiaohu.wang', sex: 'male', birthDate: '2001-01-01',
university: 'Beijing University', province: 'Shanghai', city: 'Putuo', address: 'Shanghai City Putuo jinshajing 1518 ', zip: 200333}]
}
}
}
</script>
<template>
<fish-table :columns="columns" :data="data" border height="200"></fish-table>
</template>
<script>
export default {
name: 'demo-table-scroll-xy',
data () {
return {
columns: [
{title: 'Date', key: 'date', width: '200'},
{title: 'Name', key: 'name', width: '200'},
{title: 'Sex', key: 'sex', width: '200'},
{title: 'birthDate', key: 'birthDate', width: '200'},
{title: 'University', key: 'university', width: '300'},
{title: 'Province', key: 'province', width: '200'},
{title: 'City', key: 'city', width: '200'},
{title: 'Address', key: 'address', width: '300'},
{title: 'Postcode', key: 'zip', width: '200'}],
data: [
{date: '2016-05-03', name: 'xiaohu.wang', sex: 'male', birthDate: '2001-01-01',
university: 'Beijing University', province: 'Shanghai', city: 'Putuo', address: 'Shanghai City Putuo jinshajing 1518 ', zip: 200333},
{date: '2016-05-02', name: 'xiaohu.wang', sex: 'male', birthDate: '2001-01-01',
university: 'Beijing University', province: 'Shanghai', city: 'Putuo', address: 'Shanghai City Putuo jinshajing 1518 ', zip: 200333},
{date: '2016-05-04', name: 'xiaohu.wang', sex: 'male', birthDate: '2001-01-01',
university: 'Beijing University', province: 'Shanghai', city: 'Putuo', address: 'Shanghai City Putuo jinshajing 1518 ', zip: 200333},
{date: '2016-05-04', name: 'xiaohu.wang', sex: 'male', birthDate: '2001-01-01',
university: 'Beijing University', province: 'Shanghai', city: 'Putuo', address: 'Shanghai City Putuo jinshajing 1518 ', zip: 200333},
{date: '2016-05-04', name: 'xiaohu.wang', sex: 'male', birthDate: '2001-01-01',
university: 'Beijing University', province: 'Shanghai', city: 'Putuo', address: 'Shanghai City Putuo jinshajing 1518 ', zip: 200333},
{date: '2016-05-04', name: 'xiaohu.wang', sex: 'male', birthDate: '2001-01-01',
university: 'Beijing University', province: 'Shanghai', city: 'Putuo', address: 'Shanghai City Putuo jinshajing 1518 ', zip: 200333},
{date: '2016-05-04', name: 'xiaohu.wang', sex: 'male', birthDate: '2001-01-01',
university: 'Beijing University', province: 'Shanghai', city: 'Putuo', address: 'Shanghai City Putuo jinshajing 1518 ', zip: 200333},
{date: '2016-05-01', name: 'xiaohu.wang', sex: 'male', birthDate: '2001-01-01',
university: 'Beijing University', province: 'Shanghai', city: 'Putuo', address: 'Shanghai City Putuo jinshajing 1518 ', zip: 200333}]
}
}
}
</script>
<template>
<fish-table :columns="columns" :data="data" border height="200"></fish-table>
</template>
<script>
export default {
name: 'demo-table-column-fixed',
data () {
return {
columns: [
{title: 'Date', key: 'date', width: '200', fixed: 'left'},
{title: 'Name', key: 'name', width: '200'},
{title: 'Sex', key: 'sex', width: '200'},
{title: 'birthDate', key: 'birthDate', width: '200'},
{title: 'University', key: 'university', width: '300'},
{title: 'Province', key: 'province', width: '200'},
{title: 'City', key: 'city', width: '200'},
{title: 'Address', key: 'address', width: '300'},
{title: 'Postcode', key: 'zip', width: '200', fixed: 'right'}],
data: [
{date: '2016-05-03', name: 'xiaohu.wang', sex: 'male', birthDate: '2001-01-01',
university: 'Beijing University', province: 'Shanghai', city: 'Putuo', address: 'Shanghai City Putuo jinshajing 1518 ', zip: 200333},
{date: '2016-05-02', name: 'xiaohu.wang', sex: 'male', birthDate: '2001-01-01',
university: 'Beijing University', province: 'Shanghai', city: 'Putuo', address: 'Shanghai City Putuo jinshajing 1518 ', zip: 200333},
{date: '2016-05-04', name: 'xiaohu.wang', sex: 'male', birthDate: '2001-01-01',
university: 'Beijing University', province: 'Shanghai', city: 'Putuo', address: 'Shanghai City Putuo jinshajing 1518 ', zip: 200333},
{date: '2016-05-04', name: 'xiaohu.wang', sex: 'male', birthDate: '2001-01-01',
university: 'Beijing University', province: 'Shanghai', city: 'Putuo', address: 'Shanghai City Putuo jinshajing 1518 ', zip: 200333},
{date: '2016-05-04', name: 'xiaohu.wang', sex: 'male', birthDate: '2001-01-01',
university: 'Beijing University', province: 'Shanghai', city: 'Putuo', address: 'Shanghai City Putuo jinshajing 1518 ', zip: 200333},
{date: '2016-05-04', name: 'xiaohu.wang', sex: 'male', birthDate: '2001-01-01',
university: 'Beijing University', province: 'Shanghai', city: 'Putuo', address: 'Shanghai City Putuo jinshajing 1518 ', zip: 200333},
{date: '2016-05-04', name: 'xiaohu.wang', sex: 'male', birthDate: '2001-01-01',
university: 'Beijing University', province: 'Shanghai', city: 'Putuo', address: 'Shanghai City Putuo jinshajing 1518 ', zip: 200333},
{date: '2016-05-01', name: 'xiaohu.wang', sex: 'male', birthDate: '2001-01-01',
university: 'Beijing University', province: 'Shanghai', city: 'Putuo', address: 'Shanghai City Putuo jinshajing 1518 ', zip: 200333}]
}
}
}
</script>
Table Attributes
Table Column Attributes