I received a new task today, and a new hint is needed in the path details. The serial number is changed to router_id, and then the current node of the first data and the next node need to be the same, otherwise the background color of the list will change. The router_id needs to be displayed continuously starting from 1, otherwise the prompt for changing the background color will also be performed. After thinking about it for a long time, I finally finished it with the help of my colleagues. My IQ is worrying.
How to get data from the background:
loadDetailData(routerid) {
if(!this.url.list){
this.$message.error("请设置url.list属性!")
return
}
//加载数据 若传入参数1则加载第一页的内容
this.ipagination.current = 1;
var params = Object.assign({
routerId: routerid}, this.isorter);
params.pageNo = this.ipagination.current;
params.pageSize = this.ipagination.pageSize;
this.loading = true;
getAction(this.url.list, params).then((res) => {
if (res.success) {
this.dataSource = res.result.records;
this.ipagination.total = res.result.total;
// 校验连贯
let len = this.dataSource.length
console.log(len)
for(var i = 0; i< len - 1; i++){
if(this.dataSource[i].nextNode !== this.dataSource[i+1].curNode){
// 不连贯
console.log( '不连贯,i=' + i);
this.$message.warning('路径节点不连贯')
break;
}
}
}
if(res.code===510){
this.$message.warning(res.message)
}
this.loading = false;
})
},
Main verification part:
// 校验连贯
let len = this.dataSource.length
console.log(len)
for(var i = 0; i< len - 1; i++){
if(this.dataSource[i].nextNode !== this.dataSource[i+1].curNode){
// 不连贯
console.log( '不连贯,i=' + i);
this.$message.warning('路径节点不连贯')
break;
}
}
i< len-1; is boundary processing, two contents are compared, how to not reduce by one, it will cause the array to cross the boundary.
this.dataSource[i].nextNode is the next node parameter of the current path.
this.dataSource[i+1].curNode is the current node parameter of the next path.
If it is judged that it is not equal, the message will be prompted.
Table Change Background Color Method :
Add the a-table in the attribute: rowClassName = "rowClassName"
<a-table
ref="table"
size="middle"
bordered
rowKey="id"
:columns="columns"
:dataSource="dataSource"
:pagination="ipagination"
:loading="loading"
:rowClassName="rowClassName"
@change="handleTableChange"
>
</a-table>
js:
methods: {
rowClassName(record,index){
//判定数字连续
console.log(record)
let j = index+1;//index从0开始，序号从一开始
if(record.routerNo != j){
return "blue-back";
}
//判定站点连续
if(index>0 && this.dataSource[index-1].nextNode != record.curNode){
// console.log('执行到了2')
return "blue-back";
}
// return ""
},
rowClassName(record,index), record is the current row data, index is the subscript
index>0 is the second data, determine whether the second data is the same as the first data node
CSS：
<style lang="less" scoped>
/deep/.blue-back {
background-color: #ffff00;
}
</style>
Finished effect: The
node is not continuous: the
serial number is not continuous:
In addition: it is also required to add two buttons to move up and down. Here, the background transmission data has been sorted according to the serial number from large to small, so the button shift has little effect.