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

桃扇骨 2022-04-17 07:17 309阅读 0赞

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()
                },