一.需求
需要對(duì)指定列，結(jié)合后端請(qǐng)求進(jìn)行排序

二.效果

三.知識(shí)點(diǎn)

3.1 如果需要結(jié)合后端請(qǐng)求排序，將需要排序的列上設(shè)置sortable為custom

3.2 同時(shí)在el-table標(biāo)簽上監(jiān)聽(tīng)sort-change事件，在事件回調(diào)中可以獲取當(dāng)前排序列的字段名和排序順序，從而將這些作為發(fā)起接口請(qǐng)求的入?yún)?/p>

3.3 sort-change方法自帶三個(gè)參數(shù)，分別為：

column：當(dāng)前列
prop：當(dāng)前列需要排序的字段名
order：排序的規(guī)則（升序、降序和默認(rèn)，默認(rèn)就是沒(méi)排序）

四.代碼和注釋如下文章來(lái)源地址http://www.zghlxwxcb.cn/news/detail-606986.html

 <el-table
     ref="multipleTable" 
     :data="tableData"
     tooltip-effect="dark"
     style="width: 100%"
     @selection-change="handleSelectionChange"
     @sort-change='sortTableFun' //監(jiān)聽(tīng)sort-change事件,綁定sortTableFun函數(shù)
     border
 >
     <el-table-column
      prop="name"  //要設(shè)置prop，要不然函數(shù)獲取不到對(duì)應(yīng)的列的字段名
      label="指標(biāo)名稱"
      sortable='custom' //將需要排序的列上設(shè)置sortable為custom
      min-width="10%"
      show-overflow-tooltip
     >
    </el-table-column>
 </el-table>

 sortTableFun(column){//用戶點(diǎn)擊這一列的上下排序按鈕時(shí)，觸發(fā)的函數(shù)
          this.column = column.prop; //該方法獲取到當(dāng)前列綁定的prop字段名賦值給一個(gè)變量，之后這個(gè)變量做為入?yún)鹘o后端
            if (column.prop) { //該列有綁定prop字段走這個(gè)分支
              if (column.order == 'ascending') {//當(dāng)用戶點(diǎn)擊的是升序按鈕，即ascending時(shí)
                  this.order = 'asc'; //將order這個(gè)變量賦值為后端接口文檔定義的升序的字段名，之后作為入?yún)鹘o后端
              } else if (column.order == 'descending') {
              //當(dāng)用戶點(diǎn)擊的是升序按鈕，即descending時(shí)
                  this.order = 'desc';//將order這個(gè)變量賦值為后端接口文檔定義的降序的字段名，之后作為入?yún)鹘o后端
              }
                  this.indexQueryListFun()//且發(fā)起后端請(qǐng)求的接口
            }
 },
 
indexQueryListFun(){ //發(fā)起后端請(qǐng)求的接口
        const param = `${this.column},${this.order}` //將入?yún)凑蘸蠖艘蟮母袷胶皖愋吞崆皽?zhǔn)備好
        indexQueryList(param).then((res) => { //發(fā)起請(qǐng)求
          if (res.data.code == 200){ //如果返回200
          //將后端返回的內(nèi)容做數(shù)據(jù)處理
             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 //將處理完的數(shù)據(jù)賦值到模板的表格數(shù)據(jù)上
            this.total=res.data.result.total 
          }else if(res.data.code == 401){ //若返回401
            alert("登錄已失效") //彈窗登錄已失效
            window.location.href="http:" //且跳轉(zhuǎn)到對(duì)應(yīng)地址
          }else{ //如果返回其他狀態(tài)碼，直接彈出后端返回的提示信息
            alert(res.data.message)
          }
        })
 }

到了這里，關(guān)于Vue 中 element-ui table 結(jié)合后端請(qǐng)求實(shí)現(xiàn)排序的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！