Recibí una nueva tarea hoy y se necesita una nueva pista en los detalles de la ruta. El número de serie se cambia a router_id, y luego el nodo actual de los primeros datos y el siguiente nodo deben ser iguales; de lo contrario, el color de fondo de la lista cambiará. El router_id debe mostrarse continuamente a partir de 1; de lo contrario, también se ejecutará la solicitud para cambiar el color de fondo. Después de pensarlo durante mucho tiempo, finalmente lo terminé con la ayuda de mis colegas, mi coeficiente intelectual es preocupante.
Cómo obtener datos del fondo:
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;
})
},
Parte de verificación principal:
// 校验连贯
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; es procesamiento de límites, se comparan dos contenidos, cómo no reducir en uno, hará que la matriz cruce el límite.
this.dataSource [i] .nextNode es el siguiente parámetro de nodo de la ruta actual.
this.dataSource [i + 1] .curNode es el parámetro de nodo actual de la siguiente ruta.
Si se considera que no es igual, el mensaje se le pedirá.
Método de color de fondo de cambio de tabla :
agregue la tabla a en el atributo: 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 (registro, índice), el registro son los datos de la fila actual, el índice es el subíndice
índice> 0 es el segundo dato, determina si el segundo dato es el mismo que el primer nodo de datos
CSS:
<style lang="less" scoped>
/deep/.blue-back {
background-color: #ffff00;
}
</style>
Efecto final: el
nodo no es continuo: el
número de serie no es continuo:
además: también es necesario agregar dos botones para moverse hacia arriba y hacia abajo, aquí los datos de transmisión en segundo plano se han ordenado según el número de serie de mayor a menor , por lo que el cambio de botón tiene poco efecto.