feat: publicize doc implemetation
This commit is contained in:
Justineo
229
one/docs/demo/table/advanced.vue
Normal file
229
one/docs/demo/table/advanced.vue
Normal file
@@ -0,0 +1,229 @@
|
||||
<template>
|
||||
<article>
|
||||
<section>
|
||||
<veui-button
|
||||
ui="primary"
|
||||
@click="append"
|
||||
>
|
||||
Add
|
||||
</veui-button>
|
||||
</section>
|
||||
<section>
|
||||
<veui-checkbox
|
||||
v-model="mode"
|
||||
true-value="multiple"
|
||||
false-value="single"
|
||||
>
|
||||
Multiple selection
|
||||
</veui-checkbox>
|
||||
<veui-checkbox v-model="showOps">
|
||||
Display “Operations”
|
||||
</veui-checkbox>
|
||||
<veui-checkbox v-model="selectSpanRow">
|
||||
Select by “Group” <small>(instead of “ID”)</small>
|
||||
</veui-checkbox>
|
||||
</section>
|
||||
<section>
|
||||
<veui-table
|
||||
:data="data"
|
||||
:key-field="selectSpanRow ? 'group' : 'id'"
|
||||
selectable
|
||||
:select-mode="mode"
|
||||
:order-by="orderBy"
|
||||
:order="order"
|
||||
:selected.sync="selected"
|
||||
@sort="handleSort"
|
||||
>
|
||||
<veui-table-column
|
||||
field="id"
|
||||
title="ID"
|
||||
sortable
|
||||
>
|
||||
<template #head>
|
||||
<strong>ID</strong>
|
||||
</template>
|
||||
<template #foot>
|
||||
<strong>Total</strong>
|
||||
</template>
|
||||
</veui-table-column>
|
||||
<veui-table-column
|
||||
field="group"
|
||||
title="Group"
|
||||
:span="groupSpan"
|
||||
/>
|
||||
<veui-table-column
|
||||
field="name"
|
||||
title="Name"
|
||||
width="160"
|
||||
/>
|
||||
<veui-table-column
|
||||
field="bid"
|
||||
title="Bid"
|
||||
sortable
|
||||
width="160"
|
||||
align="right"
|
||||
>
|
||||
<template slot-scope="{ bid }">
|
||||
{{ bid | currency }}
|
||||
</template>
|
||||
<template #foot>
|
||||
<strong>{{ total | currency }}</strong>
|
||||
</template>
|
||||
</veui-table-column>
|
||||
<veui-table-column
|
||||
field="updateDate"
|
||||
title="Last updated"
|
||||
align="center"
|
||||
>
|
||||
<template slot-scope="{ id, updateDate }">
|
||||
<span :ref="`time-a-${id}`">{{ updateDate | date }}</span>
|
||||
<veui-tooltip :target="`time-a-${id}`">
|
||||
{{ updateDate | time }}
|
||||
</veui-tooltip>
|
||||
</template>
|
||||
</veui-table-column>
|
||||
<veui-table-column
|
||||
v-if="showOps"
|
||||
field="operation"
|
||||
title="Opertaions"
|
||||
>
|
||||
<template slot-scope="{ index }">
|
||||
<veui-button
|
||||
ui="text"
|
||||
@click="del(index)"
|
||||
>
|
||||
Remove
|
||||
</veui-button>
|
||||
</template>
|
||||
</veui-table-column>
|
||||
</veui-table>
|
||||
<p>Selected: {{ JSON.stringify(selected) }}</p>
|
||||
</section>
|
||||
</article>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { groupBy } from 'lodash'
|
||||
import { Button, Checkbox, Table, Column, Tooltip } from 'veui'
|
||||
|
||||
export default {
|
||||
components: {
|
||||
'veui-button': Button,
|
||||
'veui-table': Table,
|
||||
'veui-table-column': Column,
|
||||
'veui-tooltip': Tooltip,
|
||||
'veui-checkbox': Checkbox
|
||||
},
|
||||
filters: {
|
||||
currency (value) {
|
||||
return '¥' + value.toFixed(2)
|
||||
},
|
||||
date (value) {
|
||||
let [, ...parts] = value.match(/(\d{4})(\d{2})(\d{2})/) || []
|
||||
return parts.join('-')
|
||||
},
|
||||
time (value) {
|
||||
let [, ...parts] = value.match(/(\d{4})(\d{2})(\d{2})/) || []
|
||||
return parts.join('-') + ' 00:00:00'
|
||||
}
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
mode: 'multiple',
|
||||
showOps: true,
|
||||
selectSpanRow: true,
|
||||
data: [
|
||||
{
|
||||
id: '3154',
|
||||
name: 'Steve Rogers',
|
||||
bid: 1024,
|
||||
updateDate: '20131117',
|
||||
group: '1577'
|
||||
},
|
||||
{
|
||||
id: '3155',
|
||||
name: 'Thor Odinson',
|
||||
bid: 598,
|
||||
updateDate: '20140214',
|
||||
group: '1577'
|
||||
},
|
||||
{
|
||||
id: '3156',
|
||||
name: 'Tony Stark',
|
||||
bid: 820,
|
||||
updateDate: '20170610',
|
||||
group: '1578'
|
||||
},
|
||||
{
|
||||
id: '3157',
|
||||
name: 'Stephen Strange',
|
||||
bid: 736,
|
||||
updateDate: '20180109',
|
||||
group: '1578'
|
||||
}
|
||||
],
|
||||
nextId: 3158,
|
||||
nextIndex: 4,
|
||||
order: false,
|
||||
orderBy: null,
|
||||
selected: ['1577'],
|
||||
groupSpan: i => {
|
||||
let groups = groupBy(this.data, 'group')
|
||||
let item = this.data[i]
|
||||
let itemGroup = groups[item.group]
|
||||
if (item.id === (itemGroup[0] || {}).id) {
|
||||
return {
|
||||
row: itemGroup.length
|
||||
}
|
||||
}
|
||||
return {
|
||||
row: 0
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
total () {
|
||||
return this.data.reduce((total, item) => {
|
||||
return total + item.bid
|
||||
}, 0)
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
del (index) {
|
||||
this.data.splice(index, 1)
|
||||
},
|
||||
append () {
|
||||
let d = new Date(Date.now() + Math.floor(Math.random() * 1e10))
|
||||
|
||||
let item = {
|
||||
id: String(this.nextId),
|
||||
group: String(Math.floor(this.nextId / 2)),
|
||||
name: `Character-${this.nextIndex}`,
|
||||
bid: Math.floor(Math.random() * 1280),
|
||||
updateDate:
|
||||
d.getFullYear() +
|
||||
String(d.getMonth() + 1).padStart(2, '0') +
|
||||
String(d.getMonth() + 1).padStart(2, '0')
|
||||
}
|
||||
this.nextId++
|
||||
this.nextIndex++
|
||||
this.data.push(item)
|
||||
},
|
||||
handleSort (orderBy, order) {
|
||||
this.orderBy = orderBy
|
||||
this.order = order
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
section {
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.veui-checkbox {
|
||||
margin-right: 20px;
|
||||
}
|
||||
</style>
|
||||
151
one/docs/demo/table/basic.vue
Normal file
151
one/docs/demo/table/basic.vue
Normal file
@@ -0,0 +1,151 @@
|
||||
<template>
|
||||
<article>
|
||||
<section>
|
||||
<h4>Density</h4>
|
||||
<veui-radio-group
|
||||
v-model="density"
|
||||
:items="[
|
||||
{ label: 'Compact', value: 'compact' },
|
||||
{ label: 'Normal', value: 'normal' },
|
||||
{ label: 'Loose', value: 'loose' }
|
||||
]"
|
||||
/>
|
||||
</section>
|
||||
<section>
|
||||
<h4>Size</h4>
|
||||
<veui-radio-group
|
||||
v-model="size"
|
||||
:items="[
|
||||
{ label: 'Medium', value: 'm' },
|
||||
{ label: 'Small', value: 's' }
|
||||
]"
|
||||
/>
|
||||
</section>
|
||||
<section>
|
||||
<veui-table
|
||||
:ui="ui"
|
||||
:data="data"
|
||||
key-field="id"
|
||||
>
|
||||
<veui-table-column
|
||||
field="id"
|
||||
title="ID"
|
||||
/>
|
||||
<veui-table-column
|
||||
field="name"
|
||||
title="Name"
|
||||
/>
|
||||
<veui-table-column
|
||||
field="bid"
|
||||
title="Bid"
|
||||
width="160"
|
||||
align="right"
|
||||
>
|
||||
<template slot-scope="{ bid }">
|
||||
{{ bid | currency }}
|
||||
</template>
|
||||
</veui-table-column>
|
||||
<veui-table-column
|
||||
field="updateDate"
|
||||
title="Last updated"
|
||||
align="center"
|
||||
>
|
||||
<template slot-scope="{ updateDate }">
|
||||
{{ updateDate | date }}
|
||||
</template>
|
||||
</veui-table-column>
|
||||
<veui-table-column
|
||||
field="operation"
|
||||
title="Operations"
|
||||
>
|
||||
<template slot-scope="{ index }">
|
||||
<veui-button
|
||||
ui="text"
|
||||
@click="remove(index)"
|
||||
>
|
||||
Remove
|
||||
</veui-button>
|
||||
</template>
|
||||
</veui-table-column>
|
||||
</veui-table>
|
||||
</section>
|
||||
</article>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { Table, Column, RadioGroup, Button } from 'veui'
|
||||
|
||||
export default {
|
||||
components: {
|
||||
'veui-table': Table,
|
||||
'veui-table-column': Column,
|
||||
'veui-radio-group': RadioGroup,
|
||||
'veui-button': Button
|
||||
},
|
||||
filters: {
|
||||
currency (value) {
|
||||
return '¥' + value.toFixed(2)
|
||||
},
|
||||
date (value) {
|
||||
let [, ...parts] = value.match(/(\d{4})(\d{2})(\d{2})/) || []
|
||||
return parts.join('-')
|
||||
}
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
density: 'normal',
|
||||
size: 'm',
|
||||
data: [
|
||||
{
|
||||
id: '3154',
|
||||
name: 'Steve Rogers',
|
||||
bid: 1024,
|
||||
updateDate: '20131117'
|
||||
},
|
||||
{
|
||||
id: '3155',
|
||||
name: 'Thor Odinson',
|
||||
bid: 598,
|
||||
updateDate: '20140214'
|
||||
},
|
||||
{
|
||||
id: '3156',
|
||||
name: 'Tony Stark',
|
||||
bid: 820,
|
||||
updateDate: '20170610'
|
||||
},
|
||||
{
|
||||
id: '3157',
|
||||
name: 'Stephen Strange',
|
||||
bid: 736,
|
||||
updateDate: '20180109'
|
||||
}
|
||||
]
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
ui () {
|
||||
return `${this.density} ${this.size}`
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
remove (index) {
|
||||
this.data.splice(index, 1)
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped docs>
|
||||
section {
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
h4 {
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
.veui-checkbox {
|
||||
margin-right: 20px;
|
||||
}
|
||||
</style>
|
||||
158
one/docs/demo/table/expandable.vue
Normal file
158
one/docs/demo/table/expandable.vue
Normal file
@@ -0,0 +1,158 @@
|
||||
<template>
|
||||
<article>
|
||||
<section>
|
||||
<veui-table
|
||||
:data="data"
|
||||
expandable
|
||||
key-field="id"
|
||||
>
|
||||
<veui-table-column
|
||||
field="id"
|
||||
title="ID"
|
||||
/>
|
||||
<veui-table-column
|
||||
field="name"
|
||||
title="Name"
|
||||
/>
|
||||
<veui-table-column
|
||||
field="bid"
|
||||
title="Bid"
|
||||
width="160"
|
||||
align="right"
|
||||
>
|
||||
<template slot-scope="{ bid }">
|
||||
{{ bid | currency }}
|
||||
</template>
|
||||
</veui-table-column>
|
||||
<veui-table-column
|
||||
field="updateDate"
|
||||
title="Last updated"
|
||||
align="center"
|
||||
>
|
||||
<template slot-scope="{ updateDate }">
|
||||
{{ updateDate | date }}
|
||||
</template>
|
||||
</veui-table-column>
|
||||
</veui-table>
|
||||
</section>
|
||||
</article>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { Table, Column } from 'veui'
|
||||
|
||||
export default {
|
||||
components: {
|
||||
'veui-table': Table,
|
||||
'veui-table-column': Column
|
||||
},
|
||||
filters: {
|
||||
currency (value) {
|
||||
return '¥' + value.toFixed(2)
|
||||
},
|
||||
date (value) {
|
||||
let [, ...parts] = value.match(/(\d{4})(\d{2})(\d{2})/) || []
|
||||
return parts.join('-')
|
||||
}
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
data: [
|
||||
{
|
||||
id: '3154',
|
||||
name: 'Steve Rogers',
|
||||
bid: 1024,
|
||||
updateDate: '20131117',
|
||||
children: [
|
||||
{
|
||||
id: '3154',
|
||||
name: 'Steve Rogers',
|
||||
bid: 1024,
|
||||
updateDate: '20131117'
|
||||
},
|
||||
{
|
||||
id: '3154',
|
||||
name: 'Steve Rogers',
|
||||
bid: 1001,
|
||||
updateDate: '20131116'
|
||||
},
|
||||
{
|
||||
id: '3154',
|
||||
name: 'Steve Rogers',
|
||||
bid: 985,
|
||||
updateDate: '20131115'
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
id: '3155',
|
||||
name: 'Thor Odinson',
|
||||
bid: 598,
|
||||
updateDate: '20140214',
|
||||
children: [
|
||||
{
|
||||
id: '3155',
|
||||
name: 'Thor Odinson',
|
||||
bid: 520,
|
||||
updateDate: '20131116'
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
id: '3156',
|
||||
name: 'Tony Stark',
|
||||
bid: 820,
|
||||
updateDate: '20170610',
|
||||
children: [
|
||||
{
|
||||
id: '3156',
|
||||
name: 'Tony Stark',
|
||||
bid: 800,
|
||||
updateDate: '20131116'
|
||||
},
|
||||
{ id: '3156', name: 'Tony Stark', bid: 763, updateDate: '20131115' }
|
||||
]
|
||||
},
|
||||
{
|
||||
id: '3157',
|
||||
name: 'Stephen Strange',
|
||||
bid: 736,
|
||||
updateDate: '20180109',
|
||||
children: [
|
||||
{
|
||||
id: '3157',
|
||||
name: 'Stephen Strange',
|
||||
bid: 704,
|
||||
updateDate: '20131116'
|
||||
},
|
||||
{
|
||||
id: '3157',
|
||||
name: 'Stephen Strange',
|
||||
bid: 666,
|
||||
updateDate: '20131112'
|
||||
},
|
||||
{
|
||||
id: '3157',
|
||||
name: 'Stephen Strange',
|
||||
bid: 521,
|
||||
updateDate: '20131111'
|
||||
},
|
||||
{
|
||||
id: '3157',
|
||||
name: 'Stephen Strange',
|
||||
bid: 428,
|
||||
updateDate: '20131110'
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
section {
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
</style>
|
||||
145
one/docs/demo/table/fixed.vue
Normal file
145
one/docs/demo/table/fixed.vue
Normal file
@@ -0,0 +1,145 @@
|
||||
<template>
|
||||
<article>
|
||||
<veui-table
|
||||
:data="data"
|
||||
key-field="id"
|
||||
:scroll="{ x: 800 }"
|
||||
>
|
||||
<veui-table-column
|
||||
field="id"
|
||||
title="ID"
|
||||
width="80"
|
||||
fixed="left"
|
||||
/>
|
||||
<veui-table-column title="Characters">
|
||||
<veui-table-column
|
||||
field="name"
|
||||
title="Name"
|
||||
width="200"
|
||||
/>
|
||||
<veui-table-column
|
||||
field="title"
|
||||
title="Title"
|
||||
width="200"
|
||||
/>
|
||||
</veui-table-column>
|
||||
<veui-table-column
|
||||
field="bid"
|
||||
title="Bid"
|
||||
width="160"
|
||||
align="right"
|
||||
>
|
||||
<template slot-scope="{ bid }">
|
||||
{{ bid | currency }}
|
||||
</template>
|
||||
</veui-table-column>
|
||||
<veui-table-column
|
||||
field="updateDate"
|
||||
title="Last updated"
|
||||
align="center"
|
||||
width="200"
|
||||
>
|
||||
<template slot-scope="{ updateDate }">
|
||||
{{ updateDate | date }}
|
||||
</template>
|
||||
</veui-table-column>
|
||||
<veui-table-column
|
||||
field="operation"
|
||||
title="Operations"
|
||||
width="140"
|
||||
fixed="right"
|
||||
>
|
||||
<template slot-scope="{ index }">
|
||||
<veui-button
|
||||
ui="text"
|
||||
@click="remove(index)"
|
||||
>
|
||||
Remove
|
||||
</veui-button>
|
||||
</template>
|
||||
</veui-table-column>
|
||||
</veui-table>
|
||||
</article>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { Table, Column, Button } from 'veui'
|
||||
|
||||
export default {
|
||||
components: {
|
||||
'veui-table': Table,
|
||||
'veui-table-column': Column,
|
||||
'veui-button': Button
|
||||
},
|
||||
filters: {
|
||||
currency (value) {
|
||||
return '¥' + value.toFixed(2)
|
||||
},
|
||||
date (value) {
|
||||
let [, ...parts] = value.match(/(\d{4})(\d{2})(\d{2})/) || []
|
||||
return parts.join('-')
|
||||
}
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
data: [
|
||||
{
|
||||
id: '3154',
|
||||
name: 'Steve Rogers',
|
||||
bid: 1024,
|
||||
title: 'Captain America',
|
||||
updateDate: '20131117'
|
||||
},
|
||||
{
|
||||
id: '3155',
|
||||
name: 'Thor Odinson',
|
||||
bid: 598,
|
||||
title: 'God of Thunder',
|
||||
updateDate: '20140214'
|
||||
},
|
||||
{
|
||||
id: '3156',
|
||||
name: 'Tony Stark',
|
||||
bid: 820,
|
||||
title: 'Ironman',
|
||||
updateDate: '20170610'
|
||||
},
|
||||
{
|
||||
id: '3157',
|
||||
name: 'Stephen Strange',
|
||||
bid: 736,
|
||||
title: 'Doctor Strange',
|
||||
updateDate: '20180109'
|
||||
}
|
||||
]
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
remove (index) {
|
||||
this.data.splice(index, 1)
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped docs>
|
||||
section {
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
h4 {
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
.veui-checkbox {
|
||||
margin-right: 20px;
|
||||
}
|
||||
</style>
|
||||
|
||||
<docs>
|
||||
在固定列模式下，必须为被固定的列指定 `width` 属性。
|
||||
</docs>
|
||||
|
||||
<docs locale="en-US">
|
||||
The `width` prop must be specified for fixed columns.
|
||||
</docs>
|
||||
125
one/docs/demo/table/scrollable.vue
Normal file
125
one/docs/demo/table/scrollable.vue
Normal file
@@ -0,0 +1,125 @@
|
||||
<template>
|
||||
<article>
|
||||
<section>
|
||||
<veui-table
|
||||
:data="data"
|
||||
scroll="360"
|
||||
key-field="id"
|
||||
>
|
||||
<veui-table-column
|
||||
field="id"
|
||||
title="ID"
|
||||
/>
|
||||
<veui-table-column
|
||||
field="name"
|
||||
title="Name"
|
||||
/>
|
||||
<veui-table-column
|
||||
field="bid"
|
||||
title="Bid"
|
||||
width="160"
|
||||
align="right"
|
||||
>
|
||||
<template slot-scope="{ bid }">
|
||||
{{ bid | currency }}
|
||||
</template>
|
||||
</veui-table-column>
|
||||
<veui-table-column
|
||||
field="updateDate"
|
||||
title="Last updated"
|
||||
align="center"
|
||||
>
|
||||
<template slot-scope="{ updateDate }">
|
||||
{{ updateDate | date }}
|
||||
</template>
|
||||
</veui-table-column>
|
||||
</veui-table>
|
||||
</section>
|
||||
</article>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { Table, Column } from 'veui'
|
||||
|
||||
export default {
|
||||
components: {
|
||||
'veui-table': Table,
|
||||
'veui-table-column': Column
|
||||
},
|
||||
filters: {
|
||||
currency (value) {
|
||||
return '¥' + value.toFixed(2)
|
||||
},
|
||||
date (value) {
|
||||
let [, ...parts] = value.match(/(\d{4})(\d{2})(\d{2})/) || []
|
||||
return parts.join('-')
|
||||
}
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
data: [
|
||||
{
|
||||
id: '3154',
|
||||
name: 'Steve Rogers',
|
||||
bid: 1024,
|
||||
updateDate: '20131117'
|
||||
},
|
||||
{
|
||||
id: '3155',
|
||||
name: 'Thor Odinson',
|
||||
bid: 598,
|
||||
updateDate: '20140214'
|
||||
},
|
||||
{
|
||||
id: '3156',
|
||||
name: 'Tony Stark',
|
||||
bid: 820,
|
||||
updateDate: '20170610'
|
||||
},
|
||||
{
|
||||
id: '3157',
|
||||
name: 'Stephen Strange',
|
||||
bid: 736,
|
||||
updateDate: '20180109'
|
||||
},
|
||||
{
|
||||
id: '3158',
|
||||
name: 'Natalie Romanoff',
|
||||
bid: 736,
|
||||
updateDate: '20180123'
|
||||
},
|
||||
{
|
||||
id: '3159',
|
||||
name: 'Bruce Banner',
|
||||
bid: 736,
|
||||
updateDate: '20181201'
|
||||
},
|
||||
{
|
||||
id: '3160',
|
||||
name: 'Peter Parker',
|
||||
bid: 736,
|
||||
updateDate: '20181113'
|
||||
},
|
||||
{
|
||||
id: '3161',
|
||||
name: "T'Challa",
|
||||
bid: 736,
|
||||
updateDate: '20180730'
|
||||
},
|
||||
{
|
||||
id: '3162',
|
||||
name: 'Loki',
|
||||
bid: 736,
|
||||
updateDate: '20180601'
|
||||
}
|
||||
]
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
section {
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user