ivew | element ui- 关于table组件自定义sortMethod排序不生效或错误问题处理

Posted smallyi

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了ivew | element ui- 关于table组件自定义sortMethod排序不生效或错误问题处理相关的知识,希望对你有一定的参考价值。

 

最近项目需求需要,需要对表格列进行自定义排序,用的是iview的组件,看了文档,table 排序这部分,但是没有给出相关例子。以为不难搞的,是不难搞,就是折腾了好一会。。。

Iview table 排序

技术图片

 

 data () 
            return 
                columns5: [
                    
                        title: ‘Date‘,
                        key: ‘date‘,
                        sortable: true,
                       
                    ,
                    
                        title: ‘Name‘,
                        key: ‘name‘
                    ,
                    
                        title: ‘Age‘,
                        key: ‘age‘,
                        sortable: true,
                        sortMethod:function(a,b,type) 
                           if (type == ‘asc‘) 
                               return a > b? -1 : 1
                            else 
                               return a > b? -1 : 1  
                           
                        
                
                    ,
                    
                        title: ‘Address‘,
                        key: ‘address‘
                    
                ],
                data5: [
                    
                        name: ‘John Brown‘,
                        age: 18,
                        address: ‘New York No. 1 Lake Park‘,
                        date: ‘2016-10-03‘
                    ,
                    
                        name: ‘Jim Green‘,
                        age: 24,
                        address: ‘London No. 1 Lake Park‘,
                        date: ‘2016-10-01‘
                    ,
                    
                        name: ‘Joe Black‘,
                        age: 30,
                        address: ‘Sydney No. 1 Lake Park‘,
                        date: ‘2016-10-02‘
                    ,
                    
                        name: ‘Jon Snow‘,
                        age: 26,
                        address: ‘Ottawa No. 2 Lake Park‘,
                        date: ‘2016-10-04‘
                    
                ]
            
        ,
        methods: 
           
                   

 

注意: 返回必须是-1 ,1

 

Element UI table 排序

 

远程排序

 

<script src="//unpkg.com/vue/dist/vue.js"></script>
<script src="//unpkg.com/[email protected]/lib/index.js"></script>
<div id="app">
<template>
  <el-table
    :data="tableData"
    style="width: 100%"
    :default-sort = "prop: ‘date‘, order: ‘descending‘"
    @sort-change="sortChange"        
    >
    <el-table-column
      prop="date"
      label="日期"
      sortable=‘custom‘

      width="180">
    </el-table-column>
    <el-table-column
      prop="name"
      label="姓名"
      sortable
      width="180">
    </el-table-column>
    <el-table-column
      prop="address"
      label="地址"
      :formatter="formatter">
    </el-table-column>
  </el-table>
</template>
</div>

js部分

var Main = 
    data() 
      return 
        tableData: [
          date: ‘2016-05-02‘,
          name: ‘王小虎‘,
          address: ‘上海市普陀区金沙江路 1518 弄‘
        , 
          date: ‘2016-05-04‘,
          name: ‘王小虎‘,
          address: ‘上海市普陀区金沙江路 1517 弄‘
        , 
          date: ‘2016-05-01‘,
          name: ‘王小虎‘,
          address: ‘上海市普陀区金沙江路 1519 弄‘
        , 
          date: ‘2016-05-03‘,
          name: ‘王小虎‘,
          address: ‘上海市普陀区金沙江路 1516 弄‘
        ]
      
    ,
    methods: 
      formatter(row, column) 
        return row.address;
      ,
      sortChange(column, key, order) 
        console.log(column, key, order)
       
    
  
var Ctor = Vue.extend(Main)
new Ctor().$mount(‘#app‘)

控制台截图:

技术图片

 

 自定义排序 -- sort-method

 html部分:

<script src="//unpkg.com/vue/dist/vue.js"></script>
<script src="//unpkg.com/[email protected]/lib/index.js"></script>
<div id="app">
<template>
  <el-table
    :data="tableData"
    style="width: 100%"
    :default-sort = "prop: ‘date‘, order: ‘descending‘"
         
    >
    <el-table-column
      prop="date"
      label="日期"
      :sortable="true"
      :sort-method="sortMethod"  //只需写方法名,不能把添加参数括号的写法如:sortMethod(a,b)
      
      width="180">
    </el-table-column>
    <el-table-column
      prop="name"
      label="姓名"
      sortable
      width="180">
    </el-table-column>
    <el-table-column
      prop="address"
      label="地址"
      :formatter="formatter">
    </el-table-column>
  </el-table>
</template>
</div>

js部分:

var Main = 
    data() 
      return 
        tableData: [
          date: ‘2016-05-02‘,
          name: ‘王小虎‘,
          address: ‘上海市普陀区金沙江路 1518 弄‘
        , 
          date: ‘2016-05-04‘,
          name: ‘王小虎‘,
          address: ‘上海市普陀区金沙江路 1517 弄‘
        , 
          date: ‘2016-05-01‘,
          name: ‘王小虎‘,
          address: ‘上海市普陀区金沙江路 1519 弄‘
        , 
          date: ‘2016-05-03‘,
          name: ‘王小虎‘,
          address: ‘上海市普陀区金沙江路 1516 弄‘
        ]
      
    ,
    methods: 
      formatter(row, column) 
        return row.address;
      ,
      sortMethod(obj1, obj2) 
        console.log(obj1, obj2)
      
    
  
var Ctor = Vue.extend(Main)
new Ctor().$mount(‘#app‘)

控制台截图:

技术图片

 方法自动带有data里面前后的数据行对象,可以根据array.sort()https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Array/sort 的写法进行自定义排序的方式

技术图片

不如我自己写的排序,想默认点击排序字段,然后先是降序,然后再点击再是升序。如下:

      
sortMethod(a, b) console.log(a, b) var at = Date.parse(a.date) var bt = Date.parse(b.date) console.log( bt, at) if (at > bt) console.log(1) return -1 else console.log(-1) return 1

这样会有个问题,不能都在点击排序字段列的时候,就拿到该字段,现在只能是在函数方法里面通过obj.date的获取属性的方式获取。如果整个表格很多个字段要这样排序,就麻烦了。

改进版写法:

<el-table-column
      prop="date"
      label="日期"
      :sortable="true"
      :sort-method="(a,b) => sortMethod(a ,b , ‘date‘)"
      
      width="180">
    </el-table-column>
sortMethod(obj1, obj2, column) 
// console.log(obj1, obj2, column)
  var at = obj1[column]
  var bt = obj2[column]
  // console.log(at, bt)

  if (at > bt)
  return -1
   else
  return 1
  

可以采用js的箭头函数写法,传一个自定义的字段名进去,然后由当前两个对比的数据行对象获取,从而进行比较即可。

 

以上是关于ivew | element ui- 关于table组件自定义sortMethod排序不生效或错误问题处理的主要内容,如果未能解决你的问题,请参考以下文章

关于Element UI Table 的 slot-scope

关于vue+element-ui的table多选禁用某个按钮

element-ui table

关于element-ui的按需引入配置

关于vue中的过滤器使用--结合element-ui的table项

时间选择器组件之关于table走过的弯路