小謝第36問：elemet - table表格修改後表格行高亮顯示且定位到當前行當前頁

優雅的小謝發表於2020-07-15

第一次做這個需求得時候很亂，總是在表格頁和修改頁徘徊，總覺得什麼都會，但是就是做不出自己想要得效果

其實如果先把思路搞清楚，這個問題得知識點卻是不多，以下是我對錶格高亮顯示得思路：

首先，我會從已知得表格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儲存一下

下一步是對修改頁面得操作--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;
		},

　其實仔細看來，在高亮顯示的過程中對技術要求並不高，如果思路清晰，問題不大

相關文章