vue 通用table组件(子组件)获取父类分页组件的currentPage和pageSize
子组件:<template><el-table :data="tableData" :newPage="newPage" :newPageSize="newPageSize" border><el-table-columntype="index":index="indexMethod"width="50"...
·
子组件: <template> <el-table :data="tableData" :newPage="newPage" :newPageSize="newPageSize" border> <el-table-column type="index" :index="indexMethod" width="50" align="center" ></el-table-column> <!--prop: 字段名name, label: 展示的名称, fixed: 是否需要固定(left, right), minWidth: 设置列的最小宽度(不传默认值),align 设置列的相对位置--> <el-table-column v-for="(item,key) in tableKey" :key="key" :prop="item.prop" :label="item.label" :minWidth="item.minWidth" :align="item.align" :fixed="item.fixed" ></el-table-column> </el-table> </template> <script> export default{ name: 'newTable', data(){ return{ } }, methods: { //翻页修改索引 indexMethod(index){ return (this.newPage-1)*this.newPageSize+index+1; }, }, props:{ tableKey: { type: Array, default: [] }, tableData: { type: Array, default: [] }, //newPage和newPageSize完全是为了实现自定义分页的索引 newPage:{ type:Number, default:1 }, newPageSize:{ type:Number, default:10 } }, } </script>
父组件:
<template> <div> <newTable :tableData="tableData" :tableKey="tableKey" :newPage="newPage" :newPageSize="newPageSize" v-loading="loading" style="width: 95%;margin-top: 5px;margin-left: 25px;"></newTable> <div class="block" style="width: 95%;text-align: center;margin-left: 25px"> <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="currentPage" :page-sizes="[10, 20, 30, 40]" :page-size="pageSize" layout="total, sizes, prev, pager, next, jumper" :total="recordSize"> </el-pagination> </div> </template> <script> import newTable from '../../components/newTable'; import $ from "jquery"; export default { data() { return { //table tableData: [], tableKey: [], loading:true, //pagination currentPage: 1,//初始化当前页码 pageSize:10,//初始化页面显示条数 recordSize:0,//初始化数据总数 }; }, //页面加载完成时调用 mounted() { console.log("111"); //表格字段和样式初始化 this.getTableKey(); //表格数据初始化 this.getTableData(); }, //局部注册组件 components: { newTable, }, methods:{ back(){ this.$router.go(-1);//返回上一层 }, //获取指定类型页面的字段,名称,格式等信息 getTableKey(){ let that = this; let param={ "XX" : this.$route.query.type, "XX" : this.$route.query.type }; $.ajax({ async: true, cache: false, //后台用@RequestBody接收数据,如果没有contentType如下设置则会提示not support contentType: "application/json;charset=UTF-8", //对于特殊的数据做一次转义 data:JSON.stringify(param), type: "POST", dataType: "text", url: "XXX", success: function(result) { that.tableKey = eval(result); }, error: function(data) { // 请求失败 that.$alert("Server error, please contact administrator", "", { confirmButtonText: "Comfirm", callback: action => {} }); } }); }, //请求数据 getTableData(){ let that = this; that.loading = true; let param={ "XX" : this.$route.query.date, "XX" : this.$route.query.type, "rows" : that.pageSize, "page" : that.currentPage, }; $.ajax({ async: true, cache: false, //后台用@RequestBody接收数据,如果没有contentType如下设置则会提示not support contentType: "application/json;charset=UTF-8", //对于特殊的数据做一次转义 data:JSON.stringify(param), type: "POST", dataType: "json", url: "XXX", success: function(result) { that.recordSize = XXX; that.tableData = result; that.loading = false; }, error: function(data) { that.loading = true; // 请求失败 that.$alert("Server error, please contact administrator", "", { confirmButtonText: "Comfirm", callback: action => {} }); } }); }, //分页 handleSizeChange(val) { this.pageSize = val; this.newPageSize = val; this.getTableData(); }, handleCurrentChange(val) { this.currentPage = val; this.newPage = val; this.getTableData(); } }, beforeRouteLeave(to,from,next){ to.meta.keepAlive = true; next(); } }; </script> <style scoped> .el-table th>.cell { text-align: center; } </style>
上面的代码因为一些原因做了处理,主要的方式就是在子组件的tabel上面绑定参数,然后在props中设置类型和初始值
在父组件中也绑定一样的参数(最好不要和其他参数有冲突)
绑定值后,在父组件中相应方法中获取值即可
更多推荐
已为社区贡献1条内容
所有评论(0)