美文网首页
vue2.x+element table 后端排序

vue2.x+element table 后端排序

作者: jack_rofer | 来源:发表于2019-12-19 10:39 被阅读0次

    前言:官方文档搜索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)
       })
    
    },
    

    相关文章

      网友评论

          本文标题:vue2.x+element table 后端排序

          本文链接:https://www.haomeiwen.com/subject/pqqmnctx.html