lxm_front/vxe-table
1
0
Fork 0
mirror of https://gitee.com/xuliangzhan_admin/vxe-table.git synced 2026-01-21 05:27:57 +08:00
Code Issues Projects Releases Wiki Activity
Files
52c8bf672bb0d42b25f0309833bd0993bc8792ff
vxe-table/examples/views/table/base/Sort.vue
xuliangzhan 52c8bf672b 支持字符串类型的数值排序
2021-01-27 18:32:44 +08:00

372 lines
17 KiB
Vue
Raw Blame History

This file contains ambiguous Unicode characters
This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.
<template>
<div>
<p class="tip">
通过给需要排序功能的列加上 <table-api-link prop="sortable"/> 属性可以支持排序，还可以通过设置 <table-column-api-link prop="sort-by"/> 多字段进行排序<br>
如果该列的值为字符串类型，但实际是数值，可以设置 <table-column-api-link prop="sort-type"/>=number|string 按指定类型进行排序，默认 auto 自动转换数值<br>
如果是服务端排序，只需加上 <table-api-link prop="sort-config"/>.<table-api-link prop="remote"/> 和 <table-api-link prop="sort-change"/> 事件就可以实现<br>
还可以通过调用 <table-api-link prop="sort"/> 方法实现手动排序
</p>
<vxe-toolbar>
<template v-slot:buttons>
<vxe-button @click="$refs.xTable.sort('name', 'asc')">Name 升序</vxe-button>
<vxe-button @click="$refs.xTable.sort('name', 'desc')">Name 降序</vxe-button>
<vxe-button @click="$refs.xTable.clearSort()">清除排序</vxe-button>
</template>
</vxe-toolbar>
<vxe-table
border
highlight-hover-row
ref="xTable"
height="300"
:data="tableData">
<vxe-table-column type="seq" width="60"></vxe-table-column>
<vxe-table-column field="name" title="Name" sortable></vxe-table-column>
<vxe-table-column field="role" title="Role" sortable></vxe-table-column>
<vxe-table-column field="age" title="Age" sortable></vxe-table-column>
<vxe-table-column field="num" title="字符串" sort-type="string" sortable></vxe-table-column>
<vxe-table-column field="num2" title="数值" sort-type="number" sortable></vxe-table-column>
<vxe-table-column field="address" title="Address" sortable></vxe-table-column>
</vxe-table>
<p class="demo-code">{{ $t('app.body.button.showCode') }}</p>
<pre>
<pre-code class="xml">{{ demoCodes[0] }}</pre-code>
<pre-code class="javascript">{{ demoCodes[1] }}</pre-code>
</pre>
<p class="tip">配置 <table-column-api-link prop="sort-by"/> 指定字段排序、或者方法返回自定义排序的值</p>
<vxe-table
border
highlight-hover-row
height="300"
:data="tableData2">
<vxe-table-column type="seq" width="60"></vxe-table-column>
<vxe-table-column field="name" title="Name" :sort-by="sortNameMethod2" sortable>
<template #default="{ row }">
<span style="color: red;">名字：{{ row.name }}</span>
</template>
</vxe-table-column>
<vxe-table-column field="role" title="指定字段排序 num" sort-by="num" sortable></vxe-table-column>
<vxe-table-column field="num" title="Num" sortable></vxe-table-column>
</vxe-table>
<p class="demo-code">{{ $t('app.body.button.showCode') }}</p>
<pre>
<pre-code class="xml">{{ demoCodes[2] }}</pre-code>
<pre-code class="javascript">{{ demoCodes[3] }}</pre-code>
</pre>
<p class="tip">配置 <table-api-link prop="multiple"/> 启用多字段组合排序</p>
<vxe-table
border
highlight-hover-row
height="300"
:sort-config="{multiple: true}"
:data="tableData3"
@sort-change="sortChangeEvent3">
<vxe-table-column type="seq" width="60"></vxe-table-column>
<vxe-table-column field="name" title="Name" sortable></vxe-table-column>
<vxe-table-column field="role" title="Role" sortable></vxe-table-column>
<vxe-table-column field="num" title="Num" sortable></vxe-table-column>
</vxe-table>
<p class="demo-code">{{ $t('app.body.button.showCode') }}</p>
<pre>
<pre-code class="xml">{{ demoCodes[4] }}</pre-code>
<pre-code class="javascript">{{ demoCodes[5] }}</pre-code>
</pre>
<p class="tip">点击表头排序，通过 <table-api-link prop="defaultSort"/> 默认排序、<table-api-link prop="orders"/> 自定义轮转顺序、通过配置 <table-api-link prop="trigger"/> 设置触发源</p>
<vxe-table
border
highlight-hover-row
highlight-hover-column
height="300"
:data="tableData"
:sort-config="{trigger: 'cell', defaultSort: {field: 'age', order: 'desc'}, orders: ['desc', 'asc', null]}"
@sort-change="sortChangeEvent4">
<vxe-table-column type="seq" width="60"></vxe-table-column>
<vxe-table-column field="name" title="Name"></vxe-table-column>
<vxe-table-column field="role" title="Role" sortable></vxe-table-column>
<vxe-table-column field="sex" title="Sex" sortable></vxe-table-column>
<vxe-table-column field="age" title="Age" sortable></vxe-table-column>
<vxe-table-column field="address" title="Address" sortable></vxe-table-column>
</vxe-table>
<p class="demo-code">{{ $t('app.body.button.showCode') }}</p>
<pre>
<pre-code class="xml">{{ demoCodes[6] }}</pre-code>
<pre-code class="javascript">{{ demoCodes[7] }}</pre-code>
</pre>
</div>
</template>
<script>
export default {
data () {
return {
tableData: [
{ id: 10001, name: 'Test1', role: 'Develop', sex: 'Man', age: 28, num: '3.8', num2: '3.8', address: 'vxe-table 从入门到放弃' },
{ id: 10002, name: 'Test2', role: 'Test', sex: 'Women', age: 22, num: '511', num2: '511', address: 'Guangzhou' },
{ id: 10003, name: 'Test3', role: 'PM', sex: 'Man', age: 32, num: '12.8', num2: '12.8', address: 'Shanghai' },
{ id: 10004, name: 'Test4', role: 'Designer', sex: 'Women ', age: 23, num: '103', num2: '103', address: 'vxe-table 从入门到放弃' },
{ id: 10005, name: 'Test5', role: 'Develop', sex: 'Women ', age: 30, num: '56', num2: '56', address: 'Shanghai' },
{ id: 10006, name: 'Test6', role: 'Designer', sex: 'Women ', age: 21, num: '49', num2: '49', address: 'vxe-table 从入门到放弃' },
{ id: 10007, name: 'Test7', role: 'Test', sex: 'Man ', age: 29, num: '400.9', num2: '400.9', address: 'vxe-table 从入门到放弃' },
{ id: 10008, name: 'Test8', role: 'Develop', sex: 'Man ', age: 35, num: '5000', num2: '5000', address: 'vxe-table 从入门到放弃' }
],
tableData2: [
{ name: '小红11', role: '前端', num: 7 },
{ name: '老王1', role: '后端', num: 6 },
{ name: '小红111111', role: '后端', num: 1 },
{ name: '小明11', role: '前端', num: 2 },
{ name: '老徐111', role: '测试', num: 3 },
{ name: '老王11', role: '前端', num: 3 },
{ name: '老徐11111111', role: '测试', num: 4 },
{ name: '小明111111111', role: '前端', num: 4 },
{ name: '小明1', role: '前端', num: 8 },
{ name: '小明111', role: '测试', num: 6 },
{ name: '小红11111', role: '后端', num: 9 },
{ name: '老徐11', role: '前端', num: 5 },
{ name: '老徐11', role: '测试', num: 1 },
{ name: '小红1111', role: '前端', num: 4 },
{ name: '小红111', role: '前端', num: 2 },
{ name: '小明111', role: '测试', num: 3 },
{ name: '老王1', role: '前端', num: 6 },
{ name: '老王1111', role: '后端', num: 4 },
{ name: '老徐11', role: '前端', num: 8 },
{ name: '小明111111', role: '测试', num: 7 }
],
tableData3: [
{ name: '小红', role: '前端', num: 7 },
{ name: '老王', role: '后端', num: 6 },
{ name: '小红', role: '后端', num: 1 },
{ name: '小明', role: '前端', num: 2 },
{ name: '老徐', role: '测试', num: 3 },
{ name: '老王', role: '前端', num: 3 },
{ name: '老徐', role: '测试', num: 4 },
{ name: '小明', role: '前端', num: 4 },
{ name: '小明', role: '前端', num: 8 },
{ name: '小明', role: '测试', num: 6 },
{ name: '小红', role: '后端', num: 9 },
{ name: '老徐', role: '前端', num: 5 },
{ name: '老徐', role: '测试', num: 1 },
{ name: '小红', role: '前端', num: 4 },
{ name: '小红', role: '前端', num: 2 },
{ name: '小明', role: '测试', num: 3 },
{ name: '老王', role: '前端', num: 6 },
{ name: '老王', role: '后端', num: 4 },
{ name: '老徐', role: '前端', num: 8 },
{ name: '小明', role: '测试', num: 7 }
],
demoCodes: [
`
<vxe-toolbar>
<template v-slot:buttons>
<vxe-button @click="$refs.xTable.sort('name', 'asc')">Name 升序</vxe-button>
<vxe-button @click="$refs.xTable.sort('name', 'desc')">Name 降序</vxe-button>
<vxe-button @click="$refs.xTable.clearSort()">清除排序</vxe-button>
</template>
</vxe-toolbar>
<vxe-table
border
highlight-hover-row
ref="xTable"
height="300"
:data="tableData">
<vxe-table-column type="seq" width="60"></vxe-table-column>
<vxe-table-column field="name" title="Name" sortable></vxe-table-column>
<vxe-table-column field="role" title="Role" sortable></vxe-table-column>
<vxe-table-column field="age" title="Age" sortable></vxe-table-column>
<vxe-table-column field="num" title="字符串" sort-type="string" sortable></vxe-table-column>
<vxe-table-column field="num2" title="数值" sort-type="number" sortable></vxe-table-column>
<vxe-table-column field="address" title="Address" sortable></vxe-table-column>
</vxe-table>
`,
`
export default {
data () {
return {
tableData: [
{ id: 10001, name: 'Test1', role: 'Develop', sex: 'Man', age: 28, num: '3.8', num2: '3.8', address: 'vxe-table 从入门到放弃' },
{ id: 10002, name: 'Test2', role: 'Test', sex: 'Women', age: 22, num: '511', num2: '511', address: 'Guangzhou' },
{ id: 10003, name: 'Test3', role: 'PM', sex: 'Man', age: 32, num: '12.8', num2: '12.8', address: 'Shanghai' },
{ id: 10004, name: 'Test4', role: 'Designer', sex: 'Women ', age: 23, num: '103', num2: '103', address: 'vxe-table 从入门到放弃' },
{ id: 10005, name: 'Test5', role: 'Develop', sex: 'Women ', age: 30, num: '56', num2: '56', address: 'Shanghai' },
{ id: 10006, name: 'Test6', role: 'Designer', sex: 'Women ', age: 21, num: '49', num2: '49', address: 'vxe-table 从入门到放弃' },
{ id: 10007, name: 'Test7', role: 'Test', sex: 'Man ', age: 29, num: '400.9', num2: '400.9', address: 'vxe-table 从入门到放弃' },
{ id: 10008, name: 'Test8', role: 'Develop', sex: 'Man ', age: 35, num: '5000', num2: '5000', address: 'vxe-table 从入门到放弃' }
]
}
}
}
`,
`
<vxe-table
border
highlight-hover-row
height="300"
:data="tableData2">
<vxe-table-column type="seq" width="60"></vxe-table-column>
<vxe-table-column field="name" title="Name" :sort-by="sortNameMethod2" sortable>
<template #default="{ row }">
<span style="color: red;">名字：{{ row.name }}</span>
</template>
</vxe-table-column>
<vxe-table-column field="role" title="指定字段排序 num" sort-by="num" sortable></vxe-table-column>
<vxe-table-column field="num" title="Num" sortable></vxe-table-column>
</vxe-table>
`,
`
export default {
data () {
return {
tableData2: [
{ name: '小红11', role: '前端', num: 7 },
{ name: '老王1', role: '后端', num: 6 },
{ name: '小红111111', role: '后端', num: 1 },
{ name: '小明11', role: '前端', num: 2 },
{ name: '老徐111', role: '测试', num: 3 },
{ name: '老王11', role: '前端', num: 3 },
{ name: '老徐11111111', role: '测试', num: 4 },
{ name: '小明111111111', role: '前端', num: 4 },
{ name: '小明1', role: '前端', num: 8 },
{ name: '小明111', role: '测试', num: 6 },
{ name: '小红11111', role: '后端', num: 9 },
{ name: '老徐11', role: '前端', num: 5 },
{ name: '老徐11', role: '测试', num: 1 },
{ name: '小红1111', role: '前端', num: 4 },
{ name: '小红111', role: '前端', num: 2 },
{ name: '小明111', role: '测试', num: 3 },
{ name: '老王1', role: '前端', num: 6 },
{ name: '老王1111', role: '后端', num: 4 },
{ name: '老徐11', role: '前端', num: 8 },
{ name: '小明111111', role: '测试', num: 7 }
]
}
},
methods: {
sortNameMethod2 (row) {
// 按名称长度进行排序
return row.name.length
}
}
}
`,
`
<vxe-table
border
highlight-hover-row
height="300"
:sort-config="{multiple: true}"
:data="tableData3"
@sort-change="sortChangeEvent3">
<vxe-table-column type="seq" width="60"></vxe-table-column>
<vxe-table-column field="name" title="Name" sortable></vxe-table-column>
<vxe-table-column field="role" title="Role" sortable></vxe-table-column>
<vxe-table-column field="num" title="Num" sortable></vxe-table-column>
</vxe-table>
`,
`
export default {
data () {
return {
tableData3: [
{ name: '小红', role: '前端', num: 7 },
{ name: '老王', role: '后端', num: 6 },
{ name: '小红', role: '后端', num: 1 },
{ name: '小明', role: '前端', num: 2 },
{ name: '老徐', role: '测试', num: 3 },
{ name: '老王', role: '前端', num: 3 },
{ name: '老徐', role: '测试', num: 4 },
{ name: '小明', role: '前端', num: 4 },
{ name: '小明', role: '前端', num: 8 },
{ name: '小明', role: '测试', num: 6 },
{ name: '小红', role: '后端', num: 9 },
{ name: '老徐', role: '前端', num: 5 },
{ name: '老徐', role: '测试', num: 1 },
{ name: '小红', role: '前端', num: 4 },
{ name: '小红', role: '前端', num: 2 },
{ name: '小明', role: '测试', num: 3 },
{ name: '老王', role: '前端', num: 6 },
{ name: '老王', role: '后端', num: 4 },
{ name: '老徐', role: '前端', num: 8 },
{ name: '小明', role: '测试', num: 7 }
]
}
},
methods: {
sortChangeEvent3 ({ sortList }) {
console.info(sortList.map((item) => \`\${item.property},\${item.order}\`).join('; '))
}
}
}
`,
`
<vxe-table
border
highlight-hover-row
highlight-hover-column
height="300"
:data="tableData"
:sort-config="{trigger: 'cell', defaultSort: {field: 'age', order: 'desc'}, orders: ['desc', 'asc', null]}"
@sort-change="sortChangeEvent4">
<vxe-table-column type="seq" width="60"></vxe-table-column>
<vxe-table-column field="name" title="Name"></vxe-table-column>
<vxe-table-column field="role" title="Role" sortable></vxe-table-column>
<vxe-table-column field="sex" title="Sex" sortable></vxe-table-column>
<vxe-table-column field="age" title="Age" sortable></vxe-table-column>
<vxe-table-column field="address" title="Address" sortable></vxe-table-column>
</vxe-table>
`,
`
export default {
data () {
return {
tableData: [
{ id: 10001, name: 'Test1', role: 'Develop', sex: 'Man', age: 28, address: 'vxe-table 从入门到放弃' },
{ id: 10002, name: 'Test2', role: 'Test', sex: 'Women', age: 22, address: 'Guangzhou' },
{ id: 10003, name: 'Test3', role: 'PM', sex: 'Man', age: 32, address: 'Shanghai' },
{ id: 10004, name: 'Test4', role: 'Designer', sex: 'Women ', age: 23, address: 'vxe-table 从入门到放弃' },
{ id: 10005, name: 'Test5', role: 'Develop', sex: 'Women ', age: 30, address: 'Shanghai' },
{ id: 10006, name: 'Test6', role: 'Designer', sex: 'Women ', age: 21, address: 'vxe-table 从入门到放弃' },
{ id: 10007, name: 'Test7', role: 'Test', sex: 'Man ', age: 29, address: 'vxe-table 从入门到放弃' },
{ id: 10008, name: 'Test8', role: 'Develop', sex: 'Man ', age: 35, address: 'vxe-table 从入门到放弃' }
]
}
},
methods: {
sortChangeEvent4 ({ column, property, order }) {
console.info(property, order)
}
}
}
`
]
}
},
methods: {
sortNameMethod2 (row) {
// 按名称长度进行排序
return row.name.length
},
sortChangeEvent3 ({ sortList }) {
console.info(sortList.map((item) => `${item.property},${item.order}`).join('; '))
},
sortChangeEvent4 ({ property, order }) {
console.info(property, order)
}
}
}
</script>
Reference in New Issue View Git Blame Copy Permalink