element ui中表格table翻页记忆勾选状态
<el-table ref="multipleTable" :data="datalist" style="width:100%" @select="handleselectRow" @select-all="handleselectAll" size="small" >
<el-table-column type="selection" prop="houseId" align="center"></el-table-column>
</el-table>
//初始化列表数据
init(currentPage, pageSize) {
let _this = this;
let parmas = {
currentPage: currentPage,
pageSize: pageSize,
communityId: this.form.communityId,
companyId: this.form.companyId
}; // this.Utils.exeuhttpResquestGet(this.apiUrls.communityManagement.getTableData, {}, result => {
_this.Utils.exeuhttpResquestPost(this.apiUrls.rate.selectHouseInfoRate, parmas, result => {
_this.datalist = result.data.data.dataList;
_this.total = result.data.data.totalCount;
_this.$nextTick(function () {
_this.memoryChecked();
})
});
},
//行选中函数 若有删除,若无添加
handleselectRow(selection, row) {
if (this.selectObj[row.houseId]) {
delete this.selectObj[row.houseId]
} else {
this.selectObj[row.houseId] = row.houseId
}
},
//全选函数 点击全选遍历当页数据若无添加,若是反选则删除(判断是否是全选还是反选)
handleselectAll(selection) {
this.datalist.forEach((row, index) => {
if (this.selectObj.hasOwnProperty(row.houseId)) {
selection.length ? null : delete this.selectObj[row.houseId]
} else {
this.selectObj[row.houseId] = row.houseId
}
});
},
//记忆函数
memoryChecked(){
this.datalist.forEach((row, index) => {
if (this.selectObj.hasOwnProperty(row.houseId)) {
this.$refs.multipleTable.toggleRowSelection(row, true);
} else {
this.$refs.multipleTable.toggleRowSelection(row, false);
}
});
},
element ui中表格table翻页记忆勾选状态的更多相关文章
- Element ui 中使用table组件实现分页记忆选中
我们再用vue和element-ui,或者其他的表格的时候,可能需要能记忆翻页勾选,那么实现以下几个方法就ok了 示例如下 <el-table :data="tableData&quo ...
- 在vue中关于element UI 中表格实现下载功能,表头添加按钮,和点击事件失效的解决办法。
因为在element 中表格是使用el-table的形式通过数据来支撑结构,所以,表格的样式没有自己写的灵活,所以有了没法添加按钮的烦恼.下面是解决的方法. 准备工作: 一.下载npm安装包两个 1. ...
- 关于Element UI中页面样式小问题
一,修改组件dialog窗口的大小 二,在我使用upload组件上传一张美女图片时,发现当预览图片时,图片是灰色的,点击一下才会变亮,这种效果使我很不舒服,于是我通过添加下面的一条样式,问题解决了(可 ...
- element框架中表格的筛选功能使用说明(转载)
一.element框架中表格的筛选功能使用说明 转载:https://blog.csdn.net/liangxhblog/article/details/80513030 在element ui 框架 ...
- layui table 跨页记忆选择
layui 表格功能目前默认不支持跨页记忆选择 下面来实现layui table跨页记忆选择实现 基于layui版本 1.4.5 表格跨页通用方法 //表格分页复选框 layui.define(['j ...
- element ui设置表格表头高度和每一行的高度
填坑记录:今天用element ui的表格组件做用户信息展示,直接拉取的官网的代码过来,发现表头和每一行都太高了,如下: 因为第一次使用element ui的表格组件,不太清楚会遇到这样的坑,以为能轻 ...
- Android中实现滑动翻页—使用ViewFlipper(dp和px之间进行转换)
Android中实现滑动翻页—使用ViewFlipper(dp和px之间进行转换) Android中dp和px之间进行转换 在xml布局文件中,我们既可以设置px,也可以设置dp(或者dip).一般情 ...
- Element UI 中组件this.$message报错
最近在做毕设的时候,用Element UI中的消息提示message一直报以下的错误: 展示的效果也不好看,没有图标什么的: 但我明明有在main.js引入了element-ui 呀,因为毕设时间很赶 ...
- 关于Element UI中select组件中遇到的问题
问题一:在使用select组件设置多选功能后,窗口抖动问题? 详细描述:在我使用select做多选的功能时出现了窗口抖动的问题,测试的时候发现,在有些人的电脑上抖动,有些人的电脑上不抖,找了很多文档, ...
随机推荐
- .NET5都来了,你还不知道怎么部署到linux?最全部署方案,总有一款适合你
随着2020进入4季度,.NET5正式版也已经与大家见面了.不过,尽管 .NET Core发布已经有四五年的时间,但到目前为止,依旧有很多.NET开发者在坚守者.NET4,原因不尽相同,但最大的问题可 ...
- 其实SQL优化调优,就跟吃饭喝水一样简单,教你抓住SQL的本质!
前言 SOL 优化并不简单,做好 SOL 优化需要掌握数据库体系结构.表和索引设计.高效 SOL法.高级 SOL 语法.多种优化工具等知识,甚至还得分析业务特点,以及了解优化器的缺点.只有建立 SOL ...
- 新鲜出炉!阿里Java后端面经,已拿offer!
前面给大家分享了一篇字节跳动拿下offer的面经,很多小伙伴都私信我说收获很大,感兴趣的朋友可以回头去看看.很多小伙伴还问我有没有其他大厂的面试题分享,这不他来啦,阿里2020春招面试题给大家整理在下 ...
- 思维导图软件iMindMap怎么使用
人人都说,思维导图记忆法实用.可是,我们应该如何使用思维导图呢?又该如何从思维小白摇身一变成为逻辑大神呢?俗话说,心急吃不了热豆腐,让我们一步一步来,慢慢接触使用思维导图吧. 小编作为"过来 ...
- web自动化测试难点 滚动条操作、日期框处理、上传文件
如何把页面滑到最低部? 一般来说,做web自动化测试时,不需要单独写代码,把页面滑到可见,因为click操作,只要是元素存在并且加载出来了,就可以点击到,无需另外写滑动元素的代码. 如果特殊情况需要滑 ...
- ubuntu安装php的 mongodb扩展
wget https://pecl.php.net/get/mongodb-1.2.6.tgztar -zxvf mongodb-1.2.6.tgz cd mongodb-1.2.6 /usr/bin ...
- 通过城市联动实时将地址显示到text中
<div class="form-group field-supplier-sort <?php if($model->getErrors('province_id') | ...
- 安装了向日葵或TeamViewer导致系统亮度无法调节
1.向日葵 安装向日葵造成无法调节亮度的原因:可能为了使用向日葵的黑屏模式功能,误装了向日葵的驱动.建议不要使用该功能. 关于安装向日葵的用户,请参考以下步骤解决: 请保持电脑处于联网状态,并关闭了向 ...
- kafka 消息存储分析
kafka 可以支持海量数据发送,轻轻松松QPS过十万,如果JVM内存存储这一块如果不够优秀,根本无法支持这么庞大的QPS. 存储架构(这里这是落地数据,并木有涉及到序列化发送数据到broker) R ...
- 如何解决vue2.0 打包之后 打开index.html出现空白页
如何解决vue2.0 打包之后 打开index.html出现空白页 1.打包之前修改三个文件 1.1.第一步,找到build文件,在webpack.prod.conf.js 第25行左右 ...