element table多选只能选中当前页数据_element-ui里的el-table 前端分页

本人是前端小白一枚此文章用以记录自己使用vue+element-ui实现项目时候实现的分页功能(和后续文章实现的功能不分先后,用到什么记录什么)
一次请求将全部要展示的数据获取到，分页在前端对数据进行处理进行分页展示

<el-tab-pane label="信息推送" name="second"><el-table:data="list.slice((currentPage-1)*pageSize,currentPage*pageSize)"borderstyle="width: 100%"><el-table-column fixed prop="xmmc" label="项目名称" width="200" align="center"></el-table-column><el-table-column prop="zdmj" label="征地面积" width="200" align="center"></el-table-column><el-table-column prop="sxmc" label="市县名称" width="200" align="center"></el-table-column><el-table-column prop="pzwh" label="批准文号" width="200" align="center"></el-table-column><el-table-column prop="pzjg" label="批准机关" width="200" align="center"></el-table-column><el-table-column prop="pzmj" label="批准面积" width="200" align="center"></el-table-column><el-table-column prop="sqdw" label="申请单位" width="200" align="center"></el-table-column><el-table-column prop="pzsj" label="批准时间" width="200" align="center"></el-table-column><el-table-column fixed="right" label="操作" align="center"><template slot-scope="scope" align="center"><el-button @click="handleClick(scope.row)" type="text" size="mini">查看</el-button></template></el-table-column></el-table><el-pagination@size-change="handleSizeChange"@current-change="handleCurrentChange":current-page="currentPage":page-sizes="[10, 20, 30, 50, 100]":page-size="pageSize"layout="total, sizes, prev, pager, next, jumper":total="list.length"style="float:right;margin-top:15px;"></el-pagination></el-tab-pane>
data() {return {list: [],//保存请求到的数据pageSize: 10, //每页多少条currentPage: 1, // 当前页}
},
methods: {// 每页多少条handleSizeChange(val) {this.pageSize = val;},// 当前页handleCurrentChange(val) {this.currentPage = val;},
// 项目信息acquire() {let _this = this;let userid = window.localStorage.getItem("userid");this.$axios.post("http://59.202.52.8/api/SelectData/SelectZdxmList",{ userid },{headers: {"Content-Type": "application/json;charset=utf-8","Access-Control-Allow-Origin": "*",Authorization: window.localStorage.getItem("token")}}).then(res => {// 把成功请求到的数据保存到list中_this.list = res.data.list;}).catch(err => {console.log(err);});},

第一页

第二页

element table多选只能选中当前页数据_element-ui里的el-table 前端分页相关推荐

element table多选只能选中当前页数据_关于“列表多选”操作流的小思考
之前在工作的时候遇到一个问题,在设计列表多选的时候,产品执意要将多选操作的按钮放在列表顶部,但是按照设计规范,该按钮应该是隐藏的,在勾选列表某一行后才会触发显示该按钮,随之产品提出的问题是: &quo ...
Element 根据勾选导出Excel表格数据
1. npm安装依赖包 npm install vue-json-excel 2.项目入口文件引进注册并且使用 import JsonExcel from 'vue-json-excel'Vue.co ...
编程案例——layui的table表格并获取选中的数据、layui监控select下拉框并将隐藏的div显示
layui table表格展示效果代码前端代码后端代码:我们需要注意后端给前端返回数据的格式获取radio标签所对应的数据条目问题描述解决办法 layui监控select下拉框并将隐藏的 ...
设置elment ui plus 的el table的边框线
:**代码设置类名,给奇偶行设置类名 const tableRowClassName = ({ rowIndex }) => {if (rowIndex % 2 === 0) {return ...
layui的layui.table.cache只能获取当前页的所有数据问题解决(layui实现添加行操作遇到分页)
今天在使用layui数据表格的时候,我想实现一个添加行的操作,但是要添加行就得先获得当前所有的数据,如果不分页的话layui.table.cache['test'];还可以获取所有的数据, 但是如果数 ...
layui table 复选框跳页后再回来保持原来选中的状态
layui table默认跳页后不存在源页面选中的状态.如果要实现记录源页面的选中状态,需要定义一个全局变量来记录数据选中状态. 1.修改table.js ;layui.define(["l ...
bootstrap table 复选框获取选中某几行的数据 + 可翻页
前期要点: 1.Set 集合的add,delete方法 2.bootstrap table 事件列表, 全选 :check-all.bs.table 取消全选: uncheck-all.bs ...
element 表格是否可以勾选和是否在数据更新之后保留之前选中的数据
第一个问题 :element 表格是否可以勾选: html部分: <el-table-column type="selection" :selectable="se ...
element table 复选框是否选选中判断
参考:https://element.eleme.cn/#/zh-CN/component/table 操作过程:table中使用下拉修改数据,由于下拉以后数据在不保存的情况之下会保持缓存值,导致ta ...

element table多选只能选中当前页数据_element-ui里的el-table 前端分页

element table多选只能选中当前页数据_element-ui里的el-table 前端分页相关推荐

最新文章

热门文章