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>

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属性（关键）
table

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

js 这里我采用的方法是传一个对象到后台接口的方式
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);
            })
        }

每隔一段时间会更新一下文章，起到一个总结的作用，若以后某一天发现自己现在写的都是垃圾的话，说明自己真的进步了，嘿嘿嘿~

vue+element 学习之路（一）数据表格分页

猜你喜欢