vue+element 数据表格分页

学习Vue快一个星期了，因为以往习惯了用JQuery去操作DOM对象的方式，一开始理解起来有些许吃力，看了快一个星期文档和各路大神的博客讲解后思路开始慢慢清晰起来，所以决定自己写一个demo，通过实战发现自己知识盲区，一点一点完善自己的demo，并且每隔一段时间记录一下自己的学习成果，做阶段性的总结

首先-环境搭建
环境搭建这里推荐一篇文章，讲解的非常详细
https://segmentfault.com/a/1190000013950461?utm_source=tag-newest

demo采用的技术栈为 vue-cli3.0 + element 后端技术栈为 springboot + mybatis

话不多说 上图

 

 

 首先是最基础的数据表格

<el-table
        :data="tableData" 
        style="width:100%"
        border
        >   
            <!-- 这个是序号 -->
            <el-table-column type="index" width="50"></el-table-column>
            <el-table-column prop="sid" width="180" label="sid"></el-table-column>
            <el-table-column prop="catalogName" width="180" label="catalogName"></el-table-column>
            <el-table-column prop="catalogCode" width="180" label="catalogCode"></el-table-column>
            <el-table-column>
                <el-button type="primary" round>查看</el-button>
                <el-button type="danger" round>删除</el-button>
            </el-table-column>
        </el-table>

js

export default {
    name:'commodityTable',
    data(){
        return{
            tableData:[],
        }
    },
    methods:{
        find:function(){
            this.axios.post('/api/catalog/find',
            ).then(res=>{
                this.tableData = res.data
            })
        },
    mounted(){
        this.find()
    }
}

这里特别提醒一下钩子函数mounted （mounted在整个实例中只执行一次，而且是在页面挂载完成之后执行，一般做初始化用）

接下来是分页

首先先来看下官方文档的参数说明

 

 

 修改原先el-table中的data属性（关键）

 

 

 

:data="tableData.slice((currentPage-1)*pagesize,currentPage*pagesize)"

在table下方添加分页工具栏

<!-- 分页工具栏 -->
            <el-pagination
                @size-change="handleSizeChange"   
                @current-change="handleCurrentChange"
                :current-page="currentPage"
                :page-sizes="[5,10,20,40]"   
                :page-size="pagesize"
                layout="total,sizes,prev,pager,next,jumper"
                :total="tableData.length"
            >
            </el-pagination>

js methods 中新添加两个方法

handleSizeChange:function(size){   //一页显示多少条
            this.pagesize = size;
        },
        handleCurrentChange:function(currentPage){  //页码更改方法
            this.currentPage = currentPage;
        }

data中添加两个变量

currentPage:1,   //默认页码为1
pagesize:10,  //默认一页显示10条

接下来是查询
添加表头

<el-row>
            <el-form :inline="true" :model="catalogCommodity">
                <el-form-item label="分类名">
                    <el-input v-model="catalogCommodity.catalogName" placeholder="分类名"></el-input>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="find()">查询</el-button>
                </el-form-item>
            </el-form>
        </el-row>

s 这里我采用的方法是传一个对象到后台接口的方式
data中添加catalogCommo

 catalogCommodity:{
                catalogName:''
            }

安装qs
npm install qs --save-dev

在该页面中引入qs

 

 

为什么要引入qs 因为如果传对象的话 使用 axios 的是Request Payload请求，而 ajax的是Form Data请求，需要通过qs将其转换 具体解析 https://www.cnblogs.com/xuzhudong/p/8487119.html

改写find方法

find:function(){

            //qs转换
            let postData = qs.stringify(this.catalogCommodity)

            this.axios.post('/api/catalog/find',
                postData
            ).then(res=>{
                this.tableData = res.data
                console.log(res);
            })
        }

版权声明：本文为CSDN博主「倔强的啊强」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.csdn.net/weixin_39327044/article/details/89440927