点击表头对该列进行排序

需求：点击表头内容实现根据该列进行排序
如图为表格中得某一列

实现方法1：只需引入js文件，哪个需要排序加个类名即可。

1.引入sort.js
https://segmentfault.com/a/11…
2.定义样式

#MyHeadTab thead tr{
    cursor: pointer;
}
.MyHeadTab{
    cursor:pointer;
}
#MyHeadTab .arrow,.MyHeadTab .arrow{
    font-family: webdings; 
    color: #ccc; 
    padding: 0; 
    font-size: 10px;
    height: 11px; 
    width: 10px; 
    overflow: hidden;
    margin-bottom: 5; 
    margin-top: -3; 
    padding: 0; 
    padding-top: 0; 
    padding-bottom: 2;
}

3.在需要排序得列加类名

实现方法2：自定义排序方法

//propertyName为该列得属性名，order为正序或倒序
compare(propertyName,order) { 
    return function (object1, object2) { 
        var value1 = object1[propertyName]; 
        var value2 = object2[propertyName]; 
        if(order){
            if (value2 < value1) { 
                return -1; 
            } 
            else if (value2 > value1) { 
                return 1; 
            } 
            else { 
                return 0; 
            } 
        }if(!order){
            if (value2 > value1) { 
                return -1; 
            } 
            else if (value2 < value1) { 
                return 1; 
            } 
            else { 
                return 0; 
            } 
        }
    } 
}

使用时：
js方法：

 compareFunc:function(propertyName,order){
    let me=this;
    me.list.sort(me.compare(propertyName,order));
    if(propertyName=="type"){
        //因一个表格可能有多个列需要排列，设置一个标志位判断当前位升序还是倒序
        me.ordertype=!me.ordertype;
    }
 }

html中：

    <td class='MyHeadTab' @click='compareFunc("type",ordertype)'>资产类型
        <span class='arrow' v-if='ordertype' @click='compareFunc("type",ordertype)'>5</span>
        <span class='arrow' v-if='!ordertype' @click='compareFunc(""type"",ordertype)'>6</span>
    </td>

样式同方式1。
效果图：

将不断完善更新，期待您的批评指正！

收藏

喜欢 0