随笔- 245 文章- 0 评论- 8 阅读- 27万

vue与element ui搭配，关于el-table表格的排序问题

关于sortable的参数

 1 <el-table
 2   :data="tableData"
 3   style="width: 100%"
 4   <!-- 数据由后台进行排序时sortable="custom",需要监听排序点击事件,会返回当前的prop和order -->
 5   @sort-change="changeSort"
 6   <!-- default-sort指定的默认排序,默认用date这一列排序,排序为升序,默认的排序也是升序 -->
 7   :default-sort="{prop: 'date', order: 'ascending'}"
 8   border>
 9   <el-table-column
10     prop="date"
11     label="日期"
12     <!-- 如果需要对表格的那一列进行排序,加一个sortable参数,可取的值有true,false,custom -->
13     sortable
14     <!-- sort-orders接收一个数组,用来指定点击可排序表头时排列的顺序,默认是['ascending', 'descending', null]点击时先升序ascending,再点击降序descending,再点击不排序null,按表格的默认索引排.可以自己设置排列顺序 -->
15     :sort-orders="['ascending', 'descending']"
16     width="180">
17   </el-table-column>
18   <el-table-column
19     prop="name"
20     label="姓名"
21     <!-- sort-by指定数据按哪个属性进行排序,如果不指定,就是按这里的prop值排,指定一个时写成字符串形式:sort-by="name",指定多个时,使用数组.这里的效果就是,当姓名的值全部一样时,就按address进行排序 -->
22     :sort-by="['name', 'address']"
23     sortable
24     width="180">
25   </el-table-column>
26   <el-table-column
27     prop="address"
28     label="地址"
29     <!-- 以上的参数排序都是在已得到的tableData数据上进行排序,如果数据做了分页当前的数据不是全部的数据时,排序就需要后台进行排序,这时需要把sortable的值改为custom,在table中用sort-change事件监听排序点击事件 -->
30     sortable="custom">
31   </el-table-column>
32 </el-table>
33 
34 methods: {
35   // 从后台获取数据,重新排序
36   changeSort (val) {
37     console.log(val) // column: {…} order: "ascending" prop: "date"
38     // 根据当前排序重新获取后台数据,一般后台会需要一个排序的参数
39 
40   }
41 }