vue el-table排序

最新推荐文章于 2024-07-22 15:23:05 发布

原创最新推荐文章于 2024-07-22 15:23:05 发布 · 747 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #javascript #前端

vue 同时被 2 个专栏收录

16 篇文章

订阅专栏

java基础复习

5 篇文章

订阅专栏

该博客讨论了如何在Java后端和Vue前端实现排序功能。在Java中，使用@RequestParam注解处理请求参数，根据prop和sort的值来构造排序字符串。而在Vue中，通过监听el-table-column的sortChange事件，更新uwInfo对象的prop和sort属性，并调用getList()方法进行数据刷新。

在java中
 @RequestParam(value="prop", required=false) String prop,
							 @RequestParam(value="sort", required=false) String sort,
		/*排序*/
		String sortStr="";
		if ((prop!=""&&prop!=null)&&(sort!=""&&sort!=null)){
			sortStr="order by"+" "+prop+" "+sort;
		}else {
			sortStr="order by id DESC";
		}

vue中

    /*排序*/
            <el-table-column label="金额" width="180px" align="center" sortable="custom" prop="withdraw_count">
          <template slot-scope="scope">
            <span>{{ scope.row.withdrawCount }}</span>
          </template>
        </el-table-column>
    
    sortChange:function(column,prop,order){
      /*      console.log(column)
            console.log(prop)
             console.log(order)*/
      if (column.order=="descending"){
        this.uwInfo.sort="DESC"
        this.uwInfo.prop=column.prop
      }else if (column.order=="ascending") {
        this.uwInfo.sort="ASC"
        this.uwInfo.prop=column.prop
      }
      this.getList()

    },