vue项目自己写json数据，分装分页组件

 

 

上面的是效果

这里面的数据是我自己写的json数据

2、要先写 分页组件的代码，通过$emit子组件向父组件传值传过去

1、子组件通过$emit的方式，调用父组件中的事件,进行传递数据
2、$emit函数只能在子组件中使用

我封装发分页组件叫Mypage.vue

<template>
    <div style="text-align: left;margin: 20px;">
        <el-pagination background 
        layout="total, prev, pager, next,jumper" 
        :total="total" 
        :page-size="pageSize"
        @size-change="handleSizeChange" 
        :currentPage="pageNum"
        @current-change="handleCurrentChange">
        </el-pagination>
    </div>
</template> 
<script>
export default {
    props: {
        // 总条目数
        total: {
            type: Number,
            default: 100
        },
        // 每页显示条目个数
        pageSize: {
            type: Number,
            default: 6
        },
        // 当前页数
        pageNum:{
            type:Number,
            default:3
        }
    },
    methods:{
         //切换当前页数
        handleCurrentChange(val) {
            this.$emit('handleCurrentChange', val)
        },
        //切换每页显示条目数
        handleSizeChange(val) {
            this.$emit('handleSizeChange', val)
        },
    }


}
</script>
<style scoped lang='scss'></style>

3、在父组件中使用，封装过的分页组件

我写的页面叫 Goods.vue.

因为我的数据是我自己写得json文件数据，所以要对显示的表格 tableData 进行数据分割

正常接口写好的话不需要分割数据直接  :data="tableData"

 <el-table :data="tableData">
  <el-table-column type="selection" width="25">
                </el-table-column>
                <el-table-column prop="id" align="center" label="商品ID" width="100">
</el-table-column>
</el-table>

现在是自己写的json数据所以要对数据行切割，这样写

  <el-table :data="tableData &&tableData.slice((pageNum -1) *pageSize,pageNum *pageSize)">
                <el-table-column type="selection" width="25">
                </el-table-column>
                <el-table-column prop="id" align="center" label="商品ID" width="100">
                </el-table-column>
    </el-table>
                      

我的全部页面Goods.vue

<template>
    <div class="goods">
        <!-- 搜索区域 -->
        <div class="header">
            <el-input class="search" v-model="input" placeholder="请输入内容"></el-input>
            <el-button type="primary">查询</el-button>
            <el-button type="success">添加</el-button>
        </div>
        <!-- 表格区域展示视图数据 -->
        <div class="wrapper">
            <el-table :data="tableData &&tableData.slice((pageNum -1) *pageSize,pageNum *pageSize)">
                <el-table-column type="selection" width="25">
                </el-table-column>
                <el-table-column prop="id" align="center" label="商品ID" width="100">
                </el-table-column>
                <el-table-column prop="name" align="center" label="商品名称" width="100">
                </el-table-column>
                <el-table-column prop="price" align="center" label="商品价格" width="100">
                </el-table-column>
                <el-table-column prop="number" align="center" label="商品数目" width="100">
                </el-table-column>
                <el-table-column prop="type" align="center" label="规格类目" width="100">
                </el-table-column>
                <el-table-column prop="sell" align="center" label="商品卖点" width="100">
                </el-table-column>
                <el-table-column prop="num" align="center" label="商品数量" width="100">
                </el-table-column>
                <el-table-column label="操作" align="center" width="180">
                    <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>
        </div>
        <!-- 分页  -->
        <Mypage :total="total"  :page-size="pageSize" 
         :currentPage="pageNum" 
         @handleCurrentChange="handleCurrentChange"  
         ></Mypage>


    </div>
</template>
<script>
import Mypage from '@/components/Mypage.vue';
export default {
    components: {
        Mypage
    },
    data() {
        return {
            input: '',
            tableData: [],
            // 总页数
            total: 0,
            // 当前页显示数据条数
            pageSize: 6,
            // 当前页数
            pageNum:3, 
        }
    },
    created() {
        this.getTableData()
    },

    methods: {
        // 获取表格数据方法
        getTableData() {
            // require 引入时,放在static
            const textJson = require('../../static/TestDate.json');
            const { goods } = textJson;
            this.tableData = goods
    
            this.total = goods.length
           
        },
        // 切换每页显示条目数
        handleCurrentChange(val){
            this.pageNum = val
            this.getTableData();
        },
        // 编辑操作方法
        handleEdit(index, row) {
            console.log(index, row);
        },
        // 删除操作方法
        handleDelete(index, row) {
            console.log(index, row);
        }
    },
 
}
</script>
<style scoped lang='scss'>
.goods {
    margin: 20px;

}

.header {
    display: flex;

    button {
        margin-left: 20px;
    }
}

.search {
    width: 300px;
}

.wrapper {
    margin: 20px 0;
}
</style>