element 表格分页选中

需求：

分页表格实现分页选中，编辑时可以进行回显。

实现：

刚开始拿到需求后本来是自己写代码实现分页选中，后来查了文档，发现可以根据element-table中的提供的属性实现；如下图方式实现；

//element--table<el-table:data="tableList"@selection-change="selectionChangeHandle"ref="distributionList"style="width: 100%":max-height="tableHeight":row-key="getKey"><el-table-column type="selection" width="55" align="center" :reserve-selection="true"></el-table-column><el-table-column type="index" label="#" align="center" width="70" /><el-table-column label="时间" prop="orderTime" min-width="170" /><el-table-column label="金额" prop="amount" min-width="150"></el-table-column></el-table>

js部分：

 getKey(row) {return row.id;  },//选中事件selectionChangeHandle(selection) {this.tableSelection = selection; //返回的selection是包含分页内的全部选中数据},

关于回显：

回显的思路就是拿到全部的数据，然后全部进行回显，方法是element如下：

  toggleSelection(rows) {if (rows) {rows.forEach(row => {this.$refs.distributionList.toggleRowSelection(row, true););} else {this.$refs.distributionList.clearSelection();}},

但是在回显过程中遇到了一个问题，后端返回给我的数据和表格中的数据结构不一样，导致我回显不了，在这里我先做的是回显后进行table渲染

mounted() {if (this.choseItems.length) {this.$nextTick(() => {this.toggleSelection(this.choseItems); //回显数据});}this.requestList(); //请求table数据},

实现效果：

element 表格分页选中相关推荐

element表格分页功能
element表格分页效果图 1.添加表格和分页组件 <el-table stripe :data="tableData.slice((currentPage-1)*pagesize ...
element 表格+分页封装
原因:element ui 的表格组件默认是不带分页的功能,但是实际工作中表格总是搭配分页功能一起出现的.封装在一起使用方便不需要每次都复制粘贴一大堆. 可以根据自己的需求更改,自己根据设计图定义样式 ...
element表格默认选中
我们在使用element写表格时,有时会遇到给表格进行设置默认选中某些行的情况.当遇到这一情况我们该怎么处理呢,在这里记录一个处理这种情况的方法: this.$nextTick(function () ...
vue element表格默认选中表格第一行
获取数据后添加下面得代码 <el-table :data="tableData" style="width: 100%" ref="myTabl ...
element表格分页 + 页码不连续
1. data () {return {// 省略其他 ... + pageParams: { + page: 1, // 查询第一页 + pagesize: 2 // 每页两条 --- 要与pagi ...
Vue+Element表格动态列+表格分页
LayUI表格动态列及分页LayUI+JavaScript表格动态列+表格分页效果如图: 代码: 引用JQuery,Vue,Element等文件,换成自己的路径 <!DOCTYPE html& ...
element 表格全选,，翻页选中取消相关效果
elementui的表格默认是没有所有数据选中的操作的,仅仅只是选中当前页的10条或者20条数据,因此我们需要自己手动加入一个全选操作的按钮.以此来将数据全部选中保存. 第一步操作思路:全选操作反过 ...
element 表格是否可以勾选和是否在数据更新之后保留之前选中的数据
第一个问题 :element 表格是否可以勾选: html部分: <el-table-column type="selection" :selectable="se ...
Vue + Element + Table 分页选择勾选和取消勾选的问题
Vue + Element + Table 分页选择勾选和取消勾选的问题问题描述: 需求是这样的===>表格前面每条数据都有复选框吧然后表格有很多页 , 我从第一页选取N条数据再去其他页 ...

element 表格分页选中

需求：

实现：

关于回显：

element 表格分页选中相关推荐

最新文章

热门文章