uniapp语法如何实现table排序

利用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>

uniapp语法实现扫码枪自带条码读取代码

uniapp语法如何动态配置路由信息

uniapp语法中如何使用路由进行页面跳转

uniapp中如何对路由传参进行加密与解密

uniapp返回上一页并实现刷新

标签： table排序, uniapp语法

上面是“uniapp语法如何实现table排序”的全面内容，想了解更多关于 js 内容，请继续关注web建站教程。

当前网址：https://m.ipkd.cn/webs_4561.html

声明：本站提供的所有资源部分来自互联网，如果有侵犯您的版权或其他权益，请发送到邮箱：admin@ipkd.cn，我们会在看到邮件的第一时间内为您处理！