Vue 中 element-ui table 结合后端请求实现排序-Toy模板网

这篇具有很好参考价值的文章主要介绍了Vue 中 element-ui table 结合后端请求实现排序。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

一.需求
需要对指定列，结合后端请求进行排序

二.效果
Vue 中 element-ui table 结合后端请求实现排序,elementui,前端,vue.js,javascript

三.知识点

3.1 如果需要结合后端请求排序，将需要排序的列上设置sortable为custom

3.2 同时在el-table标签上监听sort-change事件，在事件回调中可以获取当前排序列的字段名和排序顺序，从而将这些作为发起接口请求的入参

3.3 sort-change方法自带三个参数，分别为：

column：当前列
prop：当前列需要排序的字段名
order：排序的规则（升序、降序和默认，默认就是没排序）

四.代码和注释如下文章来源地址https://www.toymoban.com/news/detail-606986.html

 <el-table
     ref="multipleTable" 
     :data="tableData"
     tooltip-effect="dark"
     style="width: 100%"
     @selection-change="handleSelectionChange"
     @sort-change='sortTableFun' //监听sort-change事件,绑定sortTableFun函数
     border
 >
     <el-table-column
      prop="name"  //要设置prop，要不然函数获取不到对应的列的字段名
      label="指标名称"
      sortable='custom' //将需要排序的列上设置sortable为custom
      min-width="10%"
      show-overflow-tooltip
     >
    </el-table-column>
 </el-table>

 sortTableFun(column){//用户点击这一列的上下排序按钮时，触发的函数
          this.column = column.prop; //该方法获取到当前列绑定的prop字段名赋值给一个变量，之后这个变量做为入参传给后端
            if (column.prop) { //该列有绑定prop字段走这个分支
              if (column.order == 'ascending') {//当用户点击的是升序按钮，即ascending时
                  this.order = 'asc'; //将order这个变量赋值为后端接口文档定义的升序的字段名，之后作为入参传给后端
              } else if (column.order == 'descending') {
              //当用户点击的是升序按钮，即descending时
                  this.order = 'desc';//将order这个变量赋值为后端接口文档定义的降序的字段名，之后作为入参传给后端
              }
                  this.indexQueryListFun()//且发起后端请求的接口
            }
 },
 
indexQueryListFun(){ //发起后端请求的接口
        const param = `${this.column},${this.order}` //将入参按照后端要求的格式和类型提前准备好
        indexQueryList(param).then((res) => { //发起请求
          if (res.data.code == 200){ //如果返回200
          //将后端返回的内容做数据处理
             const sjclarr = res.data.result.records.map((i)=>{
              if(i.customerRealName==null){
                 i.customerRealName=''
              }else{
                 i.customerRealName=i.customerRealName.split('（')[0]
              }
              return i
            })
            this.tableData=sjclarr //将处理完的数据赋值到模板的表格数据上
            this.total=res.data.result.total 
          }else if(res.data.code == 401){ //若返回401
            alert("登录已失效") //弹窗登录已失效
            window.location.href="http:" //且跳转到对应地址
          }else{ //如果返回其他状态码，直接弹出后端返回的提示信息
            alert(res.data.message)
          }
        })
 }