thinkphp6使用element ui表格和分页

搜索、一件清空搜索框内容、重置搜索条件

分页数、直接到达输入框

请求条件参数

返回json数据格式，字段有当前页、总页数、信息总数、状态

前端

<div  id="app">
    <div class="searchBox">
        <span class="ui-input ui-input-search" align="end" style="margin-right: 20px;">
                <input type="search" placeholder="关键词" v-model="query.key" />
                <button class="ui-icon-search" @click="search">搜索</button>
        </span>

        <el-button type="success" @click="reset">重置</el-button>
    </div>
    <template>
        <el-table :data="tableData" style="width: 100%">
            <el-table-column prop="auth_id" label="ID" width="60"></el-table-column>

            <el-table-column prop="auth_name" label="权限名称"></el-table-column>

            <el-table-column prop="auth_c" label="控制器"></el-table-column>

            <el-table-column prop="auth_a" label="方法"></el-table-column>

            <el-table-column prop="auth_path" label="全路径"></el-table-column>

            <el-table-column prop="auth_status" label="左侧显示"></el-table-column>

            <el-table-column prop="auth_sort" label="排序"></el-table-column>

            <el-table-column label="操作">
                <template slot-scope="scope">
                    <el-button
                            size="mini"
                            @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
                    <el-button
                            size="mini"
                            type="danger"
                            @click="handleDelete(scope.$index, scope.row)">删除</el-button>
                </template>
            </el-table-column>
        </el-table>
    </template>
    <!-- pages -->
    <div class="pages">
        <el-pagination
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :current-page.sync="query.current"
                :page-size="query.pageSize"
                layout="prev, pager, next, jumper"
                :total="total">
        </el-pagination>
    </div>
</div>

script

var _self;
    new Vue({
        el: '#app',
        data: function() {
            return {

                tableData: [],
                total:0,
                query:{
                    pageSize: 10,
                    current: 1,
                    key:''
                }
            }
        },
        created(){
            _self = this;

            this.getList();
        },
        methods:{
            reset(){
                _self.query = {
                    key:'',
                    current:1
                }

                this.getList()
            },
            /* Search */
            search(){
                if(this.query.key){
                    var key = this.query.key

                    _self.query = {
                        key:key,
                        current:1
                    }

                    this.getList()
                }
            },
            handleSizeChange(val) {
                console.log(`每页 ${val} 条`);
            },
            /* Click Current Page */
            handleCurrentChange(val) {
                console.log(`当前页: ${val}`);
                _self.query.current = val
                this.getList();
            },
            getList(){
                axios.get("{:url('items')}", {
                    params:this.query
                }).then(function (response) {

                    _self.tableData = response.data.data.records

                    _self.total = response.data.data.total

                })
                .catch(function (error) {
                    console.log(error);
                })
                .finally(function () {
                    // always executed
                });
            },
            // Edit
            handleEdit(index, row) {
                //console.log(index, row);

                console.log(row.auth_id)
                var id = row.auth_id;
                if(id){
                    var title = '编辑'
                }else{
                    var title = '新增'
                }
                layer.open({
                    title:title,
                    type: 2,
                    area: ['880px', '650px'],
                    fixed: false, //不固定
                    maxmin: true,
                    content: "{:url('edit')}&id=" + id,
                    end: function () {
//                        location.reload();
                    }
                });
            },
            // Delete
            handleDelete(index, row) {
                console.log(index, row);
            }
        }
    })

thinkphp6

    public function items(){

        // search key
        $key = trim(input('key'));

        $pageSize = $this->request->param('pageSize',10);
        $current = $this->request->param('current',1);

        $list = Db::name('auth')
            ->field('auth_id,auth_name,auth_c,auth_a,auth_level,auth_path,auth_sort,auth_status')
            ->where('auth_name','like',"%$key%")
            ->order('auth_path,auth_sort', 'desc')
            ->paginate([
                'list_rows'=> $pageSize,
                'page'=>$current,
                'var_page' => 'page',
            ]);

        $count = Db::name('auth')->where('auth_name','like',"%$key%")->count();

        $list = $list->items(); // object -> array

        // foreach
        foreach($list as $key =>$val){
            $list[$key]['auth_name'] = str_repeat('—',$val['auth_level']).$list[$key]['auth_name'];
        }
        $page = 0;
        if($count != 0){
            $page = intval($count/$pageSize);

            if($count > ($pageSize * $page)){
                $page = $page + 1;
            }

        }

        // data
        $data = array(
            'current'=>$current,
            'hasNext'=>true,
            'records'=>$list,
            'total'=>$count,
            'pageNum'=>$page
        );

        return success(200,'success',$data);
    }