element UI table組件后端排序


 <el-table
        :data="tableData"
        max-height="700"
        fit
        show-overflow-tooltip="true"
        @sort-change='sortthiscolumn'
        height="500"
        :header-cell-style="{background:'#FAFAFA'}"
        :cell-style="styleObj"
        style="width: 100%"
        :default-sort = "{prop: 'date', order: 'descending'}"
      >
        <el-table-column  prop="id" label="接口編號" align="center" show-overflow-tooltip></el-table-column>
        <el-table-column prop="name" label="接口名稱" align="center"></el-table-column>
        <el-table-column prop="healthy" label="接口健康狀態" align="center">
          <template slot-scope="scope">
             <div><span :class="ifnormal(scope.row.healthy)">●</span>&ensp;{{scope.row.healthy == false ? "異常" : "正常"}}</div>
          </template>
        </el-table-column>
        <el-table-column prop="city" label="最后調用時間" align="center" sortable='custom'></el-table-column>
        <el-table-column prop="callTimes" label="調用次數" align="center" sortable='custom'></el-table-column>
         <el-table-column prop="errorCount"  label="報錯次數" align="center" sortable='custom'></el-table-column>
        <el-table-column label="操作" align="center">
          <template slot-scope="scope">
            <el-button @click="handleClick(scope.row)" type="text" size="small">調用詳情</el-button>
          </template>
        </el-table-column>  
      </el-table>
<script>
import share from "@/api/share"
export default {
  data() {
    return {
     
     
      
      
    };
  },
  methods: { 
    sortthiscolumn (column) {    //自定義排序      column參數為一個對象包含需要排序的屬性和排序方法
       if(column.prop == "callTimes" && column.order == "ascending"){
           this.useorder = "ASC"
           this.page.currentPage = 1;
            this.getRunConfig(this.page.pagesize,this.page.currentPage,this.configState,this.input,this.timeorder,this.useorder,this.errororder);
     }else if(column.prop == "callTimes" && column.order == "descending"){
           this.useorder = "DESC"
            this.page.currentPage = 1;
            this.getRunConfig(this.page.pagesize,this.page.currentPage,this.configState,this.input,this.timeorder,this.useorder,this.errororder);
     }else if(column.prop == "errorCount" && column.order == "ascending"){
            this.errororder = "ASC"
            this.page.currentPage = 1;
             this.getRunConfig(this.page.pagesize,this.page.currentPage,this.configState,this.input,this.timeorder,this.useorder,this.errororder);
     }else if(column.prop == "errorCount" && column.order == "descending"){
            this.errororder = "DESC"
            this.page.currentPage = 1;
             this.getRunConfig(this.page.pagesize,this.page.currentPage,this.configState,this.input,this.timeorder,this.useorder,this.errororder);
     }else{
       return;
     }
    },
   
  }
};
</script>

  


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM