laravel+vue+element-UI模糊查询和分页

laravel+vue+element进行不刷新查询和分页

<el-select v-model="search.site_node_id" filterable placeholder="请选择">
                    <el-option
                            v-for="item in site_nodes"
                            :key="item.id"
                            :label="item.name"
                            :value="item.id">
                    </el-option>
                </el-select>
                <span>酷站名称</span>
<el-input v-model="keyword" placeholder="请输入内容" style="width:20%"></el-input>
<el-button type="primary" icon="el-icon-search" @click="handerSearch">搜索</el-button>

标签给上数据绑定，进行后台请求

axios.get(`/admin/site?page=${this.page.num}&keyword=${this.keyword}&site_node_id=${this.search.site_node_id}`)
                    .then((res) => {
                        // console.log(res)
                        this.site = res.data.data;
                        // console.log(this.site);
                        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);
            }else if($request->has('site_node_id') and $request->site_node_id != ''){
                $cate=$request->site_node_id;
                $query->where('site_node_id',$cate);
            }
        };
        $sites = Site::with('siteNode', 'photo')->where($where)->orderBy('sort')->paginate(4);
        return response()->json($sites);
    }

分页：

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

data：

page: {--默认第一页
                    total: 0,
                    size: 0,
                    currentPage: 1,
                    num: 1
                }

create：

 handleCurrentChange(val) {
                this.page.num = val;
                this.init()
            },