iview 表格多选 保留选中状态 切换分页勾选状态保留

news/2024/7/9 23:42:52 标签: javascript, vue, es6, html, 前端

问题描述:

iview 表格 添加复选框多选的功能,由于数据过大需要分页处理。每次切换分页后,之前选中的数据被清空了。

解决办法:

代码不详细介绍啦。。。 复制粘贴就能搞定。。。
html"><template>
	<div>
		<div class="table-div"> 
			<Table :columns="columns" :height="49 * REMFontSize" :data="tableList" @on-select-all="selectAll" @on-select-all-cancel="cancelAll" @on-select="TableSelectRow" @on-select-cancel="TableSelectCancelRow" />
		</div>
		<div class="pager">
			<Page :total="page.totalCount" show-total show-sizer transfer @on-change="onChange" @on-page-size-change="onPageSizeChange" />
		</div>
	</div>
</template>
html" title=javascript>javascript">
<script>
	export default {
		data() {
			return {
				// 分页
				page: {
					// 总条数
					totalCount: 0,
					PageIndex: 1,
					PageSize: 10,
				},
				columns: [
					{
						type: 'selection',
						width: 60,
						key: 'ID',
						align: 'center'
					},
					{
						type: 'index',
						title: '#',
						key: 'index',
						align: 'center',
						width: 70
					},
					{
						title: '名称1',
						key: 'name1',
						align: 'center',
					},
					{
						title: '名称2',
						key: 'name2',
						align: 'center'
					},
					{
						title: '名称3',
						key: 'name3',
						align: 'center'
					},
				],
				// 表格数据
				tableList: [],
				// 选中的id集合
				selectEquipsIds: []
			}
		},
		methods: {
			// 判断是否选中 
			sortData() {
				if (this.selectEquipsIds.length) {
					this.tableList.forEach(ele => {
						if (this.selectEquipsIds.includes(ele.ID)) ele._checked = true;
					})
				}
			},
			// 选中一行
			TableSelectRow(selection, row) {
				if (!this.selectEquipsIds.includes(row.ID)) {
					this.selectEquipsIds.push(row.ID);
					 
				}
			},
			// 取消选中一行
			TableSelectCancelRow(selection, row) {
				var _index = this.selectEquipsIds.indexOf(row.ID);
				if (_index != -1) {
					this.selectEquipsIds.splice(_index, 1);
					 
				}
			},
			// 选中所有
			selectAll() {
				for (let i = this.tableList.length - 1; i >= 0; i--) {
					this.TableSelectRow(null, this.tableList[i]);
				}
			},
			// 取消选中所有
			cancelAll() {
				for (let i = this.tableList.length - 1; i >= 0; i--) {
					this.TableSelectCancelRow(null, this.tableList[i]);
				}
			},
			// 翻页查询
			onChange(param) {
				this.page.PageIndex = param;
				this.search();
			},
			// 选择分页数
			onPageSizeChange(param) {
				this.page.PageSize = param;
				this.search();
			},
			// 查询表格数据 
			search() {
				调用接口的方法.(info).then(res => {
					this.tableList = res.data;
					this.page.totalCount = res.Total;
					this.sortData();
				}).catch(error => {
					console.log(error);
				})
			},  
		},
	}
</script>


http://www.niftyadmin.cn/n/1367359.html

相关文章

ES6 关于时间的使用和推算

关于时间的用法 问题描述&#xff1a; 有一个开始时间和一个结束时间&#xff0c;结束时间就是当前时间。开始时间往过去退10分钟。 解决办法&#xff1a; 利用时间戳 向过去退10分钟 就用当前的时间戳 减去&#xff08;10 * 60 * 1000&#xff09; 10分钟乘以 60秒 乘以 10…

vue项目搭建:通过指令下载swagger接口文件并导入到项目里

这里是引用 cli.js #!/usr/bin/env nodeconst path require(path); const fs require(fs); const chalk require("chalk"); const figlet require("figlet");const { program } require(commander); const swagger require(./swagger.js);let confi…

正则表达式常用的案例

正则字典 var regulars {year: {regExp: /^(19|20)\d{2}$/,message: "只能为年份(四位,1900-2099)"},number: {regExp: /^(([0-9]\.[0-9]*[1-9][0-9]*)|([0-9]*[1-9][0-9]*\.[0-9])|([0-9]*[1-9][0-9]*))$/,message: "只能为数字"},bankNum: {regExp: /^\…

限时等待

如果一个线程要等待的线程的目标没有实现&#xff0c;那么他会一直等下去&#xff0c;此时就陷入了阻塞等待。 还有一种等待状态叫做延时等待&#xff0c;如果如果我去吃饭&#xff0c;但是饭店已经客满&#xff0c;需要排号&#xff0c;当排到我号时&#xff0c;饭店会叫我&am…

vue自定义指令poptip的弹窗的代码

Vue自定义指令方法介绍 页面加载时&#xff1a;bind inserted 注意区别&#xff1a;bind与inserted&#xff1a;bind时父节点为null&#xff0c;inserted时父节点存在。更新组件&#xff1a;update componentUpdated 注意区别&#xff1a;update与componentUpdated&#xff1a;…

js获取元素相对窗口位置并且兼容滚动

//获取元素的纵坐标&#xff08;相对于窗口&#xff09;function getTop(e) {var offset e.offsetTop - e.scrollTop;if (e.offsetParent ! null) offset getTop(e.offsetParent);return offset;};//获取元素的横坐标&#xff08;相对于窗口&#xff09;function getLeft(e) …

vue获取地址栏里的地址转换为json对象

地址栏的地址&#xff1a; http://localhost:8080/#/main?id001&namelasi 格式化后的地址是一个json对象 {id:001,name:lasi }/*** 通过 URL 地址获取参数*/ function getUrlParam() {let href window.location.hrefif (href.indexOf(?) > -1) {let paramStr hre…

js vue生成id

生成的效果 ‘20aad6fd-e5ea-5e0d-f300-dfac6d34ed49’ /*** 生成GUID** return {*} */ var Guid function () {var guid ;for (var i 1; i < 32; i) {var n Math.floor(Math.random() * 16.0).toString(16);guid n;if ((i 8) || (i 12) || (i 16) || (i 20))gui…