2024年08月22日 建站教程
利用uniapp开发，如何实现table进行排序，下面web建站小编给大家简单介绍一下具体实现代码！
安装脚手架
//安装uni-app-cli： npm install -g uni-app-cli //安装uni-ui插件： npm install @dcloudio/uni-ui
table进行排序
<template>
<view>
<uni-table
:title="title"
:header="header"
:body="body"
:order="order"
@switch-order="switchOrder"
/>
</view>
</template>
<script>
import { uniTable } from '@dcloudio/uni-ui'
export default {
components: {
uniTable
},
data () {
return {
title: '表格标题',
header: ['姓名', '年龄', '性别'],
body: [
{ name: '小明', age: 18, gender: '男' },
{ name: '小红', age: 20, gender: '女' },
{ name: '小刚', age: 22, gender: '男' }
],
order: null
}
},
methods: {
switchOrder (order) {
this.order = order
if (order) {
this.body.sort((a, b) => {
return order === 'asc' ? a.age - b.age : b.age - a.age
})
}
}
}
}
</script>
本文链接：http://so.lmcjl.com/news/11419/