docs_vue2/one/docs/demo/table/order.vue

135 lines
2.4 KiB
Vue
Raw Normal View History

<template>
<article>
<section>
2021-11-20 13:22:48 +08:00
<div>
2021-12-13 18:12:30 +08:00
<veui-checkbox
v-model="allowFalse"
@change="handleChange"
2021-12-13 18:12:30 +08:00
>
Allow unordered
</veui-checkbox>
2021-11-20 13:22:48 +08:00
</div>
<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
>
2021-12-03 18:26:54 +08:00
<template #default="{ bid }">
{{ bid | currency }}
</template>
</veui-table-column>
</veui-table>
</section>
</article>
</template>
<script>
2021-12-13 18:12:30 +08:00
import { Table, Column, Checkbox } 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,
2021-12-13 18:12:30 +08:00
'veui-checkbox': Checkbox
},
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>