解决element-ui不区分大小写排序的坑

因项目要求需对表格增加排序功能。开始在代码内写sortable便可进行默认排序,会发现只对当前页进行排序。后来要求对所有页进行排序,于是就加上@sort-change,这是触发排序时会执行的方法,再写个sort_change函数并返回比较结果。问题来了!发现点击排序顺序是数字大写小写,可要求是不区分大小写排序,查遍全网也没解决。经过看文档仔细琢磨,才知道光写sortable执行的是sort-method默认的a-b升序,又执行了@sort-change函数,等于进行了两次排序才导致的报错。于是改成sortable=“custom"便可解决,代表不执行sortable只执行@sort-change里的函数。另外一种方法是不设置sortable为custom而是加上:sort-method=”_=>0"来使其不排序。

//简化代码
<template>
    <el-table :data="" @sort-change="sort_change" size="small" border>
        <el-table-column prop="groupid" sortable="custom" label="消费者id"></el-table-column>
        <el-table-column prop="email" sortable :sort-method="_=>0" label="邮箱"></el-table-column>
        <el-table-column sortable ="操作">
            <template slot-scope="scope">
                <el-button @click="updateInfo(scope.row)" type="text">修改</el-button>
                <el-button @click="deleteInfo(scope.row)" type="text">删除</el-button>
            </template>
        </el-table-column>
    </el-table>
</template>
<script>
export default{
    name:'',
    component:{},
    data(){
        return {
            regData=[]
        }
    },
    created(){},
    methods:{
        sortFun: function(attr,rev){
            return function(a,b){
            	if(attr == 'delay'){//当是delay且是数字的字符串如"123"则转为数字123
					a=parseInt(a[attr])
	                b=parseInt(b[attr])
	                if(a.toLowerCase() < b.toLowerCase()){
	                    return rev * -1
	                }
	                if(a.toLowerCase() > b.toLowerCase()){
	                    return rev * -1
	                }
	                return 0
				}
                a=a[attr]
                b=b[attr]
                if(a.toLowerCase() < b.toLowerCase()){
                    return rev * -1
                }
                if(a.toLowerCase() > b.toLowerCase()){
                    return rev * -1
                }
                return 0
            }
        },
        sort_change(column){
            if(column.prop==='groupid'){
                this.regData=this.regData.sort(this.sortFun(column.prop,column.order==='ascending'))
            }else if(column.prop==='email'){
                this.regData=this.regData.sort(this.sortFun(column.prop,column.order==='ascending'))
            }
            this.page.currentPage=1
            this.handleSizeChange(this.page.pageSize)
        }
    }
}
</script>

你可能感兴趣的:(vue,vue,elementui,前端)