排序按钮

ux-order-button

ux-order-button 排序组件可以快速实现一个排序按钮，点击可切换排序方式。

运行图示

组件属性

组件事件

change : 当组件被点击, 排序数据发生变化时触发，携带数据 : 0 : 无排序，1 : 升序，2 : 降序

组件插槽

您可以通过插槽实现定义元素，参与点击及内容展示；

使用建议

1. 请使用一个 view 包裹 ux-order-button 组件， 组件宽度等于外层宽度。
2. 演示代码演示了 ts 数值排序，您也可以通过后端接口完成排序功能。

演示代码

<template>
	<scroll-view class="ux-flex1 ux-body ux-bg-white">
		<text class="ux-h6 ux-color-grey ux-mt">排序表格</text>
		<view class="ux-mt">
			<view 
				class="ux-flex ux-rows ux-nowrap ux-border-l ux-border-t ux-bg-grey5">
					<text 
					class="ux-th ux-border-r ux-border-b">姓名</text>
					<text 
					class="ux-th ux-border-r ux-border-b">班级</text>
					<text 
					class="ux-th ux-border-r ux-border-b">性别</text>
					<view class="ux-th-item">
						<ux-order-button
						@change="orderByAge" 
						:orderBy="-1" 
						:limit="[1,2]">
							<text class="ux-text">年龄</text>
						</ux-order-button>
					</view>
				</view>
				<view class="ux-flex ux-rows ux-nowrap ux-border-l" 
				v-for="(item, index) in students" 
				:key="index">
					<text class="ux-td ux-border-r ux-border-b">{{item[0]}}</text>
					<text class="ux-td ux-border-r ux-border-b">{{item[1]}}</text>
					<text class="ux-td ux-border-r ux-border-b">{{item[2]}}</text>
					<text class="ux-td ux-border-r ux-border-b">{{item[3]}}</text>
				</view>
		</view>
	</scroll-view>
</template>
<script lang="uts">
export default {
	data() {
		return {
			students : [
				['小米', '一年二班', '男', 7],
				['小明', '二年二班', '男', 6],
				['小红', '一年三班', '女', 6],
				['小雅', '一年五班', '女', 8],
				['小艳', '一年二班', '女', 10]
			]
		}
	},
	methods: {
		orderByAge : function (orderBy:number) {
			// 实现排序的方式 :
			// 01. 您可以将排序信息发送给服务器端，排序后在从新渲染页面
			// 02. 前端 js 对数组进行排序
			if(orderBy == 2){
				var newData = this.students.sort(function(a,b):number{
				  return (b[3] as number) - (a[3] as number);
				});
				this.students = [];
				this.students = newData;
			}else{
				var newData = this.students.sort(function(a,b):number{
				  return (a[3] as number) - (b[3] as number);
				});
				this.students = [];
				this.students = newData;
			}
		}
	}
}
</script>
<style scoped>
.ux-th{width:100rpx; font-size:28rpx; flex:1; overflow:hidden; padding:18rpx 10rpx; text-align:center;}
.ux-td{width:100rpx; font-size:26rpx; flex:1; overflow:hidden; padding:18rpx 10rpx; text-align:center;}
.ux-th-item{width:100rpx; flex:1; overflow:hidden; padding:18rpx 10rpx;}
</style>