标签：表格 elemet 当前页 id JSON params table route row
第一次做这个需求得时候很乱，总是在表格页和修改页徘徊，总觉得什么都会，但是就是做不出自己想要得效果
其实如果先把思路搞清楚，这个问题得知识点却是不多，以下是我对表格高亮显示得思路：
首先，我会从已知得表格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;
},
其实仔细看来，在高亮显示的过程中对技术要求并不高，如果思路清晰，问题不大
标签：表格,elemet,当前页,id,JSON,params,table,route,row 来源： https://www.cnblogs.com/xieoxie3000question/p/13304519.html
本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享； 2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关； 3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关； 4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除； 5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。