|
15 | 15 | <scriptsrc="https://cdn.jsdelivr.net/npm/sortablejs@1.8.4/Sortable.min.js"></script> |
16 | 16 | <divid="app"style="width:800px"> |
17 | 17 | <div> |
18 | | -<el-table:data="tableData"borderrow-key="id"align="left"> |
| 18 | +<el-table |
| 19 | +:data="tableData" |
| 20 | +border |
| 21 | +row-key="id" |
| 22 | +align="left" |
| 23 | +@sort-change="sortChange" |
| 24 | +:default-sort="sort" |
| 25 | +> |
19 | 26 | <el-table-column |
20 | 27 | v-for="(item, index) in dropCol" |
21 | | -:key="col[index].prop" |
| 28 | +:key="index +dropCol[index].prop" |
22 | 29 | :prop="dropCol[index].prop" |
23 | 30 | :label="item.label" |
| 31 | +sortable="custom" |
24 | 32 | > |
25 | 33 | <templateslot-scope="scope"> |
26 | 34 | <span>{{ scope.row[dropCol[index].prop] }}</span> |
|
39 | 47 | newVue({ |
40 | 48 | el:'#app', |
41 | 49 | data:{ |
42 | | -col:[ |
43 | | -{ |
44 | | -label:'日期', |
45 | | -prop:'date', |
46 | | -}, |
47 | | -{ |
48 | | -label:'姓名', |
49 | | -prop:'name', |
50 | | -}, |
51 | | -{ |
52 | | -label:'地址', |
53 | | -prop:'address', |
54 | | -}, |
55 | | -], |
| 50 | +sort:{prop:'name',order:'ascending'}, |
56 | 51 | dropCol:[ |
57 | 52 | { |
58 | 53 | label:'日期', |
|
127 | 122 | }, |
128 | 123 | }) |
129 | 124 | }, |
| 125 | +//排序 |
| 126 | +sortChange(column){ |
| 127 | +console.log(column) |
| 128 | +// column.prop = 'id' |
| 129 | +this.tableData=[ |
| 130 | +{ |
| 131 | +id:'2', |
| 132 | +date:'2016-05-04', |
| 133 | +name:'王小虎2', |
| 134 | +address:'上海市普陀区金沙江路 200 弄', |
| 135 | +}, |
| 136 | +{ |
| 137 | +id:'1', |
| 138 | +date:'2016-05-02', |
| 139 | +name:'王小虎1', |
| 140 | +address:'上海市普陀区金沙江路 100 弄', |
| 141 | +}, |
| 142 | +{ |
| 143 | +id:'4', |
| 144 | +date:'2016-05-03', |
| 145 | +name:'王小虎4', |
| 146 | +address:'上海市普陀区金沙江路 400 弄', |
| 147 | +}, |
| 148 | +{ |
| 149 | +id:'3', |
| 150 | +date:'2016-05-01', |
| 151 | +name:'王小虎3', |
| 152 | +address:'上海市普陀区金沙江路 300 弄', |
| 153 | +}, |
| 154 | +] |
| 155 | +this.tableData.sort((prev,next)=>{ |
| 156 | +if(column.order==='ascending'){ |
| 157 | +letres=prev[column.prop]-next[column.prop] |
| 158 | +console.log( |
| 159 | +res, |
| 160 | +prev[column.prop], |
| 161 | +next[column.prop], |
| 162 | +column.prop |
| 163 | +) |
| 164 | +returnres |
| 165 | +}elseif(column.order==='descending'){ |
| 166 | +letres=next[column.prop]-prev[column.prop] |
| 167 | +console.log(res) |
| 168 | +returnres |
| 169 | +}else{ |
| 170 | +return0 |
| 171 | +} |
| 172 | +}) |
| 173 | +}, |
130 | 174 | }, |
131 | 175 | }) |
132 | 176 | </script> |