ElementUI之table排序

最新推荐文章于 2025-05-30 17:17:15 发布

爱开车的彬哥

最新推荐文章于 2025-05-30 17:17:15 发布

阅读量1.9w

点赞数 5

CC 4.0 BY-SA版权

分类专栏： Vue/React/Angular

本文链接：https://blog.youkuaiyun.com/Ruffaim/article/details/79142717

Vue/React/Angular 专栏收录该内容

16 篇文章

订阅专栏

本文介绍ElementUI中Table组件的排序功能，包括默认排序方式及如何通过设置sortable属性来实现不同字段的排序，如按ID递减、姓名按拼音排序等。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

elementui是一套非常好用的ui框架，经常用于与vue搭配使用。其中有一个table组件，以下对其排序属性做下笔记。为了简洁我就写在注释里了。

<script src="//unpkg.com/vue/dist/vue.js"></script>
<script src="//unpkg.com/element-ui@2.0.11/lib/index.js"></script>
<div id="app">
  <template>
  //table的默认排序方式是按ID排序 顺序为递减 这里可以改成其他 比如 name age address
    <el-table :data="tableData" style="width: 100%" :default-sort="{prop: 'ID', order: 'descending'}">
    //设置sortable属性时出现排序按钮 数字为首按数组大小进行排序
      <el-table-column prop="ID" label="座号" sortable width="180">
      </el-table-column>
      //名称按符号--英文字母--拼音首字母排序 反之换序
      <el-table-column prop="name" label="姓名" sortable width="180">
      </el-table-column>
      //去掉sortable属性时 该项无法排序
      <el-table-column prop="age" label="年龄"  width="180">
      </el-table-column>
      <el-table-column prop="address" label="位置" :formatter="formatter">
      </el-table-column>
    </el-table>
  </template>
</div>

JavaScript部分：

var Main = {
    data() {
      return {
        tableData: [{
          ID: '12号',
          name: '李狗蛋',
          age:21,
          address: '广州市科学城'
        }, {
          ID: '13号',
          name: '黄二狗',
          age:18,
          address: '汕头市濠江区'
        }, {
          ID: '14号',
          name: '林二丫',
          age:19,
          address: '深圳市罗湖区'
        }, {
          ID: '15号',
          name: '陈大宝',
          age:20,
          address: '厦门市翔安区'
        }]
      }
    },
    methods: {
      formatter(row, column) {
        return row.address;
      }
    }
  }
var Ctor = Vue.extend(Main)
new Ctor().$mount('#app')

效果图