vue_drf之多级过滤、排序、分页

　　一、前端代码

　　1，父组件free_course.vue

<template>
  <div id="free_course">
    <el-container>
      <el-header class="header"><Header :current_state="current_state"/></el-header>
      <div style="background-color: #f6f6f6">
        <div>
          <Filters @url="url_change"/>
        </div >
        <div v-for="item in info">
          <content_free :item="item"/>
        </div>
        <el-pagination
          @current-change="handleCurrentChange"
          background
          layout="prev, pager, next"
          :page-size="page_size"
          :current-page.sync="current_page"
          :total=total>
        </el-pagination>
      </div>
      <div class="nothing" v-show="info.length==0"></div>
      <div class="nothing1" v-show="info.length==1"></div>
      <Footer/>
    </el-container>
  </div>
</template>

<script>
  import Header from '../common/header'
  import Footer from '../common/footer'
  import Filters from './filter'
  import content_free from './content_free'
  export default {
    name:'free_course',
    data:function () {
      return {
        page:2,
        info:[],
        current_state:1,
        total:10,
        page_size:1,
        current_page:1,
        params:'',
        url:'http://127.0.0.1:8000/course/course'
      }
    },
    components:{
      Header,Footer,Filters,content_free
    },
    methods:{
      handleCurrentChange(val){
        // 名字必须固定
        let url = this.url;
        url+="?page="+val+"&page_size="+this.page_size+'&'+this.params;
        this.$axios.get(url).then(res=>{
          this.info = res.data.results;
          this.total =res.data.count;
        }).catch(error=>{
          console.log(error.response);
        })
      },
      url_change:function (params) {
        this.params=params;
        this.current_page=1;
        this.handleCurrentChange(1);
      }
    },
    created:function () {
      this.handleCurrentChange(1)
    }
  }
</script>

　　父组件的css

<style scoped>
.el-header,.el-footer{
  padding: 0;
}
.el-header{
  height: 80px !important;
}
.el-pagination{
  width: 380px;
  margin: 0 auto;
}
.nothing{
  height: 519px;
  background-color: rgb(246, 246, 246)
}
.nothing1{
  height: 229px;
  background-color: rgb(246, 246, 246)
}
</style>

View Code