小谢第36问:elemet – table表格修改后表格行高亮显示且定位到当前行当前页

第一次做这个需求得时刻很乱,总是在表格页和修改页倘佯,总觉得什么都市,然则就是做不出自己想要得效果

着实若是先把思绪搞清楚,这个问题得知识点却是不多,以下是我对表格高亮显示得思绪:

首先,我会从已知得表格table中获得我需要更改得行工具-  可以用row-click方式直接获取也可以用table得selec方式

然后通过路由传参,将table数组和获取得行工具通报给修改页面-由于在返回页面得时刻定位当前行和页,因此这里也要将pagesize和currentPage举行通报

modifyDesc(row) { 
			let params = { 
				id: row.id,
				codeId: row.codeId, 
				table: this.tableData,
				totalPage: this.total,
				pageSize: this.pageSize, 
			}; 
			window.sessionStorage.setItem('editAlarmDesc', JSON.stringify(params));
			this.$router.push({
				name: 'modifyDesc',
				query: { 
					table: JSON.stringify(this.tableData),
					totalPage: this.total,
					pageSize: this.pageSize,
					currentPage: this.pageNum,
					id: row.id,
					codeId: row.codeId,  
				}
			});
		},

  

此处可以用query或者params传参,query会把传的参数拼接到url上,造成很乱得感受,以是我选择params通报参数,为了防止刷新页面后数据不存在,在传参之前我会把table和行数据用session存储一下

SpringSecurity启动流程源码解析 | 博客园新人第三弹

下一步是对修改页面得操作–1、界说空工具将当前页面得值赋值,2、对比当前工具id和传入数组,去除相同得id工具,3、拿到当前工具得下标,4、返回表格页面,通报参数

modifyDescSave(){ 
			this.updatedUser = this.ruleForm; 
			let tableIndex = 0;
			let table = JSON.stringify(this.$route.query) !== '{}' ? JSON.parse(this.$route.query.table) : JSON.parse(sessionStorage.getItem('editAlarmDesc')).table; 
			table.forEach((item, index) => {
				if(item.id === this.updatedUser.id){
					table.splice(index, 1, this.updatedUser);
					tableIndex = index;
				}
			}); 
			this.$router.push({
				name: 'alarmDesc',
				params: {
					newData: JSON.stringify(table),
					totalPage: this.$route.params.totalPage || JSON.parse(sessionStorage.getItem('editAlarmDesc')).totalPage,
					pageSize: this.$route.params.pageSize || JSON.parse(sessionStorage.getItem('editAlarmDesc')).pageSize,
					currentPage: this.$route.params.currentPage || JSON.parse(sessionStorage.getItem('editAlarmDesc')).currentPage,
					search: this.$route.params.search || JSON.parse(sessionStorage.getItem('editAlarmDesc')).search,
					firstTop: true,
					index: tableIndex
				}
			});
		},

在跳转页面之前记得消灭session哦

	beforeRouteLeave (to, from, next) {
		// 判断数据是否修改,若是修改按这个执行,没修改,则直接执行脱离此页面
		if (this.updateCount > 0) {
			//  上岸超时及注销时不显示此弹框
			if(sessionStorage.getItem('isTimeOut') === 'false' && Auth.getJwtToken()) {
				this.$my_confirm('确定后将不保留当前数据,直接关闭当前页面!确定要脱离当前页面吗?', '提醒').then(() => {
					//点确定
					next();
					sessionStorage.removeItem('editAlarmDesc');
				}).catch(() => {
					//点作废
					next(false);
					sessionStorage.removeItem('editAlarmDesc');
				});
			} else {
				next();
				sessionStorage.removeItem('editAlarmDesc');
			}
		} else {
			next();
		}
	},

  

最后是我们返回页面得要求:表格当前行高亮显示并定位到当前页面,此处我着实mounted举行吸收,判断路由参数是否存在,若是不存在举行正常得请求操作,若是存在将通报得路由参数将表格以及页面相关值逐一赋值

if (JSON.stringify(this.$route.params) !== '{}') { 
			this.tableData = JSON.parse(this.$route.params.newData);
			this.pageSize = Number(this.$route.params.pageSize);
			this.pageNum = Number(this.$route.params.currentPage); 
			this.firstTop = this.$route.params.firstTop;
			this.countAlarmCodeByLevel();
			this.totalNum = Number(this.$route.params.totalPage);
			this.total = Number(this.$route.params.totalPage);
		} else {
			this.getTable().then(() => {
				this.countAlarmCodeByLevel();
			}); 
		}

举行到当前得这一步我们得表格已实现定位操作,剩下得是表格当前行得渲染,我主要用了

row-class-name方式属性,通过改变行得class名来举行靠山得高亮显示,具体方式如下

tableRowClassName({ row, rowIndex }) { 
			let bg = '';
			this.multipleSelection.forEach(item => {
				if (row.id === item.id) {
					bg = 'ioms-table-check-class';
				}
			});  
			if (JSON.stringify(this.$route.params) !== '{}' && this.firstTop) {
				let query = JSON.parse(this.$route.params.newData);
				if(query && query.length > 0) {
					if(this.$route.params.index) {
						query[this.$route.params.index].id === row.id && (bg = 'ioms-table-new-class');
					} else{
						query[0].id === row.id && (bg = 'ioms-table-new-class');
					}
				}
			}
			return bg;
		},

 着实仔细看来,在高亮显示的过程中对手艺要求并不高,若是思绪清晰,问题不大

原创文章,作者:28x29新闻网,如若转载,请注明出处:https://www.28x29.com/archives/22530.html