1. 搜索功能,前端傳搜索數(shù)據(jù)給后端,后端where循環(huán)出來,把結(jié)果返回給前端
   前端傳數(shù)據(jù):

<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>

所以對應(yīng)下面要有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);
    }

搜索完結(jié)

2.分頁:
a.首先后端查詢的時候加一個->paginate(1);.括號里面是每一頁顯示的信息數(shù)量.這樣傳給前端數(shù)據(jù)里面就有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}} 條數(shù)據(jù)</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;
                })
            },