el-table根据字段排序

伊丽莎白太阳花

已于 2023-03-01 10:51:50 修改

阅读量479

点赞数

CC 4.0 BY-SA版权

分类专栏： vue 文章标签： javascript servlet vue.js

于 2023-03-01 10:46:58 首次发布

本文链接：https://blog.youkuaiyun.com/weixin_28898107/article/details/129276411

vue 专栏收录该内容

15 篇文章

订阅专栏

文章展示了如何在Vue.js应用中使用el-table组件来展示数据。表格具有排序功能，默认按ghTime属性升序排列，并响应sort-change事件来改变排序方式。同时，el-table支持选择功能，selection-change事件用于处理选中行的变化，存储选中行的id到tableIdList数组中。

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

<el-table
    :data="tableData"
    style="width: 100%"
    v-loading="loading"
    stripe
    :default-sort = "{ prop: 'ghTime',order: 'ascending'}" //升序
    @sort-change="changeTableSort" //根据点击按钮操作方法可操作后台接口数据
    @selection-change="handleSelectionChange"
>
    <el-table-column
      type="index" //序号的类型
      label="序号"
      align="center"
      width="50"
    >
    </el-table-column>
    <el-table-column
      prop="name"
      label="名称"
      width="150"
      show-overflow-tooltip //超出尺寸小气泡显示
      align="center">
    </el-table-column>
    <el-table-column
      prop="ghTime"
      label="时间"
      width="150"
      align="center"
      sortable="custom" //根据自己的逻辑排序的必写custom
      >
    </el-table-column>
</el-table>

//点击后根据升序还是降序的按钮，调整访问表单的参数
changeTableSort(item) {
  if(item.order == "descending"){
    this.$set(this.queryParams.params, 'order', 3)
  }else{
    this.$set(this.queryParams.params, 'order', 1)
  }
  this.getList()
}
//handleSelectionChange 操作列表被选中的方法
 //el-table复选框选中id
handleSelectionChange(val) {
  let ids = []
  for (let i = 0; i < val.length; i++) {
    ids[i] = val[i].id
  }
  this.tableIdList = ids //ids的数据组
}

此上为效果图