Vue + Element 表格字段列表排序

最新推荐文章于 2024-08-16 14:19:36 发布

大都督D

最新推荐文章于 2024-08-16 14:19:36 发布

阅读量974

点赞数

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

本文链接：https://blog.csdn.net/weixin_44088274/article/details/121172139

版权

Vue 专栏收录该内容

11 篇文章 0 订阅

订阅专栏

"本文介绍了如何在Vue.js应用中实现表格的排序功能，并通过@sort-change事件监听排序变化，更新查询参数。当用户点击表格列头进行排序时，`sortChange`函数会被触发，更新`listQuery`对象的排序字段和顺序，然后调用`getList`方法与后端进行数据交互。后端根据接收到的排序参数调整查询SQL，如使用`order by ${order}

摘要由CSDN通过智能技术生成

vue代码

1.el-table 标签上加 @sort-change="sortChange"

2.el-table-column 标签上加 prop=“block” 和 sortable=“custom” 标记

<el-table
  v-loading="listLoading"
  :data="list"
  border
  style="margin-top: 10px;"
  @sort-change="sortChange"
>
  <el-table-column
    type="index"
    width="70"
    :label="$t('table.id')"
    align="center"
  >
  </el-table-column>
  <el-table-column
    :label="$t('data.block')"
    align="center"
    sortable="custom"
    prop="block"
  >
    <template slot-scope="{ row }">
      {{ row.block }}
    </template>
  </el-table-column>
</el-table>


<script>
  private listQuery = {
      sort: "",
      order: ""
  }
    
  private sortChange(data: any) {
    const { prop, order } = data;
    this.listQuery.order = prop;
    if (order == "ascending") {
      this.listQuery.sort = "ASC";
    } else if (order == "descending") {
      this.listQuery.sort = "DESC";
    }
    this.getList();
  }
</script>

xml

<select id="read" resultMap="beans">
    select id,
    	   block,
    	   floor	
    from property
    where 1=1
    <if test="order != null and order != ''">
       order by ${order} ${sort}
    </if>
</select>