vue2.x+element table 后端排序

2019-12-19  本文已影响0人  jack_rofer

前言:官方文档搜索sort-change
1.html :el-table监听 sort-change 方法,el-table-column设置 sortable="custom"

<el-table @sort-change="sortFn">
     <el-table-column 
          sortable="custom" 
          prop="name"
          label="名字" 
          align="center" 
          width="120">
          <template slot-scope="scope">
              <div>
                {{ parseToThousandth(scope.row.name)}}
             </div>
          </template>                 
     </el-table-column>
</el-table>

2.script :在methods里面编写自定函数 sortFn 逻辑,默认参数column中有order和prop,根据后端要求的传参数,返回数据直接赋值table

sortFn(column){  //table后端排序
   console.log(column)
   let order = '';
   if(column.order ==="ascending"){
      order = (column.order).substring(0,3)
   }else if(column.order ==="descending"){
      order = (column.order).substring(0,4)
   }

   let params = { orderBy:column.prop, order:order }
   // console.log('params',params)
   this.listLoading = true;      
   this.$axios.post('queryeList',params).then(res=>{
      this.listLoading = false;
      this.$emit('tableDataFromChild',[res.data,'hadSort']) //将数据给到父组件中去
   }).catch(err=>{
      console.log('err',err)
   })

},
上一篇 下一篇

猜你喜欢

热点阅读