zoukankan      html  css  js  c++  java
  • 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=" 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>
    

      

  • 相关阅读:
    微信公众号,点击菜单,跳转到小程序
    tomcat启动时启动窗口出现乱码的解决方案
    SpringBoot实现HandlerInterceptor拦截器的接口没有需要重写的方法也不报错是怎么回事
    ZooKeeper下载安装(Windows版本)
    Failed to configure a DataSource: 'url' attribute is not specified and no embedded datasource could
    mysql连接出现java.sql.sql exception:服务器时区值'''_''''无法识别或表示多个时区
    angular执行ng build进行压缩。
    angular新建项目时没有新建路由时,后来新建路由
    关于ng-zorro-antd阿里的UI框架
    angular 项目创建打包过程
  • 原文地址:https://www.cnblogs.com/tomofagain/p/11213144.html
Copyright © 2011-2022 走看看