laravel+vue+element 下的搜索和分页功能

搜索功能,前端传搜索数据给后端,后端where循环出来,把结果返回给前端
前端传数据:

<el-row class="zuofudong select">
            <span>所属分类
                  <el-select v-model="site_node_id" class="interval" clearable placeholder="请选择">
                         <el-option v-for="item in options" :key="item.id" :label="item.name" :value="item.id">
                         </el-option>
                  </el-select>
            </span>
            <span class="interval">酷站名称
                    <el-input class="input_sousuo interval" v-model="keyword" clearable></el-input>
            </span>
                <el-button type="primary" @click="handleSearch" icon="el-icon-search">确 定</el-button>
 </el-row>

所以对应下面要有2个初始值:

    data(){
        return {
                site_node_id: '',
                keyword: '',
              }
      }

然后搜索展示

methods: {
            //搜索功能
            handleSearch() {
                this.init();
            },
            //首页功能
            init() {
                axios.get(`/admin/site?page=${this.page.num}&keyword=${this.keyword}&site_node_id=${this.site_node_id}`).then(res => {
                    // console.log(res)
                    this.tableData = res.data.data;
                    this.page.total = res.data.total;
                    this.page.size = res.data.per_page;
                })
            },
}

后端控制器:

public function index(Request $request)
    {
        $where = function ($query) use ($request) {
            if ($request->has('keyword') and $request->keyword != '') {
                $search = "%" . $request->keyword . "%";
                $query->where('name', 'like', $search);
            }
            if ($request->has('site_node_id') and $request->site_node_id != '') {
                $query->where('site_node_id', $request->site_node_id);
            }
        };
        $sites = Site::with('sitenode')->where($where)->orderBy('sort', 'desc')->paginate(1);
        return response()->json($sites);
    }

搜索完结

2.分页:
a.首先后端查询的时候加一个->paginate(1);.括号里面是每一页显示的信息数量.这样传给前端数据里面就有current_page,first_page_url,last_page,total等....
然后前端先写样式:

<div class="block el-pagination" style="margin-top: 50px;">
            <span class="el-pagination__total" style="margin-left: 20px;">共 {{page.total}} 条数据</span>
            <el-pagination style="margin-left: 1000px; margin-top: -30px;" background layout="prev, pager, next"
                           :total="page.total" :page-size="page.size" @current-change="handleCurrentChange"
                           :current-page.sync="page.currentPage"></el-pagination>
        </div>

下面初始化:

page: {
          total: 0,
          size: 0,
          currentPage: 1,
          num: 1
                },

methods:{
            //分页
            handleCurrentChange(val) {
                this.page.num = val;
                this.init()
            },
}

首页res里面取值

init() {
                axios.get(`/admin/sitenode?page=${this.page.num}`).then(res => {
                    console.log(res)
                    this.tableData = res.data.sitenodes.data
                    this.page.total = res.data.sitenodes.total;
                    this.page.size = res.data.sitenodes.per_page;
                })
            },

最后编辑于：2019.08.13 16:01:02