32632e796e
Change-Id: I76d0f72679cd75085f5ffd42f641daa198cafe11 docs: update docs for alert/autocomplete/carousel, etc. Change-Id: Ib7507f4979024f53c127e4b64b88560b93999db7 fix: update for autocomplete filter Change-Id: Ie54556715fa52838aeb6caaa19b4f9a9f14b490f docs: add docs for calendar/transfer/cascader Change-Id: I655b3cb3d25dd0649de9ae7e224e7063a40dd079 fix: add more demos for input/textarea Change-Id: Iada527ca82643a435a4775110b332155512d62a7 docs: add docs for uploader,select,table, etc. Change-Id: Ib034fd5cc9d9a420d4e002956ae925175783c5f3 docs: adjust formatting and punc. docs: adjust docs for uploader, etc. Change-Id: If06c8c1102eafce43f5802a333676fc9e62cd474 docs: add docs for nav Change-Id: If56a653ec53f19239606128fd30cae80f8e10025 docs: improve anchor demos Change-Id: I6ac1c08cc8905924d0062def1f8921fe1f302f15 docs: refine wording and format docs: update docs for check-button-group desc Change-Id: Ica7d6d0692250f0be6bd330b1ad4cc41938afd46
133 lines
2.3 KiB
Vue
133 lines
2.3 KiB
Vue
<template>
|
||
<article>
|
||
<section>
|
||
<p>
|
||
允许不排序：<veui-switch
|
||
v-model="allowFalse"
|
||
@change="handleChange"
|
||
/>
|
||
</p>
|
||
<veui-table
|
||
:data="sorted"
|
||
key-field="id"
|
||
:order="order"
|
||
:order-by="orderBy"
|
||
:allowed-orders="allowedOrders"
|
||
@sort="handleSort"
|
||
>
|
||
<veui-table-column
|
||
field="id"
|
||
title="ID"
|
||
sortable
|
||
/>
|
||
<veui-table-column
|
||
field="name"
|
||
title="Name"
|
||
/>
|
||
<veui-table-column
|
||
field="bid"
|
||
title="Bid"
|
||
width="160"
|
||
align="right"
|
||
sortable
|
||
>
|
||
<template slot-scope="{ bid }">
|
||
{{ bid | currency }}
|
||
</template>
|
||
</veui-table-column>
|
||
</veui-table>
|
||
</section>
|
||
</article>
|
||
</template>
|
||
|
||
<script>
|
||
import { Table, Column, Switch } from 'veui'
|
||
|
||
let data = [
|
||
{
|
||
id: '31552',
|
||
name: 'Thor Odinson',
|
||
bid: 598,
|
||
updateDate: '20140214'
|
||
},
|
||
{
|
||
id: '31541',
|
||
name: 'Steve Rogers',
|
||
bid: 1024,
|
||
updateDate: '20131117'
|
||
},
|
||
{
|
||
id: '31563',
|
||
name: 'Tony Stark',
|
||
bid: 820,
|
||
updateDate: '20170610'
|
||
},
|
||
{
|
||
id: '31574',
|
||
name: 'Stephen Strange',
|
||
bid: 736,
|
||
updateDate: '20180109'
|
||
}
|
||
]
|
||
|
||
let allowedOrders = [false, 'desc', 'asc']
|
||
|
||
export default {
|
||
components: {
|
||
'veui-table': Table,
|
||
'veui-table-column': Column,
|
||
'veui-switch': Switch
|
||
},
|
||
filters: {
|
||
currency (value) {
|
||
return '¥' + value.toFixed(2)
|
||
}
|
||
},
|
||
data () {
|
||
return {
|
||
order: 'asc',
|
||
orderBy: 'id',
|
||
allowFalse: true
|
||
}
|
||
},
|
||
computed: {
|
||
sorted () {
|
||
let result = data.slice(0)
|
||
if (this.order) {
|
||
const sign = this.order === 'desc' ? -1 : 1
|
||
result.sort((a, b) => {
|
||
return sign * (+a[this.orderBy] - +b[this.orderBy])
|
||
})
|
||
}
|
||
return result
|
||
},
|
||
allowedOrders () {
|
||
let result = allowedOrders.slice(0)
|
||
return this.allowFalse ? result : result.filter(item => item)
|
||
}
|
||
},
|
||
methods: {
|
||
handleSort (field, order) {
|
||
this.order = order
|
||
this.orderBy = field
|
||
},
|
||
handleChange (val) {
|
||
// 不允许不排序时，当前却是不排序，随便改下
|
||
if (!val && !this.order) {
|
||
this.order = 'desc'
|
||
}
|
||
}
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style lang="less" scoped>
|
||
section {
|
||
margin-bottom: 20px;
|
||
}
|
||
|
||
h4 {
|
||
margin-top: 0;
|
||
}
|
||
</style>
|