页面载入中...

当前位置:首页 > 技术分享 > 网络技术 > 网络技术

小谢第36问:elemet

一生中总会遇到这样的时候,你的内心已经兵荒马乱天翻地覆了,可是在别人看来你只是比平时沉默了一点,没人会觉得奇怪。这种战争,注定单枪匹马

第一次做这个需求得时候很乱,总是在表格页和修改页徘徊,总觉得什么都会,但是就是做不出自己想要得效果qfe爱图古源码汇

其实如果先把思路搞清楚,这个问题得知识点却是不多,以下是我对表格高亮显示得思路:qfe爱图古源码汇

首先,我会从已知得表格table中得到我需要更改得行对象-  可以用row-click方法直接获取也可以用table得selec方法qfe爱图古源码汇

然后通过路由传参,将table数组和获取得行对象传递给修改页面-因为在返回页面得时候定位当前行和页,因此这里也要将pagesize和currentPage进行传递qfe爱图古源码汇

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, 

qfe爱图古源码汇

此处可以用query或者params传参,query会把传的参数拼接到url上,造成很乱得感觉,所以我选择params传递参数,为了防止刷新页面后数据不存在,在传参之前我会把table和行数据用session存储一下qfe爱图古源码汇

下一步是对修改页面得操作--1、定义空对象将当前页面得值赋值,2、对比当前对象id和传入数组,去除相同得id对象,3、拿到当前对象得下标,4、返回表格页面,传递参数qfe爱图古源码汇

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哦qfe爱图古源码汇

 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();

qfe爱图古源码汇

最后是我们返回页面得要求:表格当前行高亮显示并定位到当前页面,此处我实在mounted进行接收,判断路由参数是否存在,如果不存在进行正常得请求操作,如果存在将传递得路由参数将表格以及页面相关值一一赋值qfe爱图古源码汇

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();
 }); 
 }

进行到当前得这一步我们得表格已实现定位操作,剩下得是表格当前行得渲染,我主要用了qfe爱图古源码汇

row-class-name方法属性,通过改变行得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;

其实仔细看来,在高亮显示的过程中对技术要求并不高,如果思路清晰,问题不大qfe爱图古源码汇

免责申明:注册会员下载资源前请仔细阅读本站条款
本站所有资源都来自于网络,版权归原创者所有!本站网络资源不提供任何售后和服务,也不承担任何法律责任,如有侵权或危害了你的利益,请出示相应的资质证明并联系站长,我们将马上予以删除。
来源:爱图古源码网(站长邮箱:a13879801652@foxmail.com 转载请保留出处!)
本文地址:https://www.aitgoo.com/wangluo/35936.html
相关关键词: