uniapp语法如何实现table排序

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/

展开阅读全文
相关内容