Recebi uma nova tarefa hoje, e uma nova dica é necessária nos detalhes do caminho. O número de série é alterado para router_id e, em seguida, o nó atual dos primeiros dados e o próximo nó precisam ser os mesmos, caso contrário, a cor de fundo da lista mudará. O router_id precisa ser exibido continuamente a partir de 1, caso contrário, o prompt para alterar a cor de fundo também será executado. Depois de muito pensar nisso, finalmente terminei com a ajuda dos meus colegas, meu QI é preocupante.
Como obter dados do fundo:
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 principal de verificação:
// 校验连贯
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; é o processamento de limite, dois conteúdos são comparados, como não reduzir em um, isso fará com que o array cruze o limite.
this.dataSource [i] .nextNode é o próximo parâmetro do nó do caminho atual.
this.dataSource [i + 1] .curNode é o parâmetro do nó atual do próximo caminho.
Se for considerado que não é igual, a mensagem será solicitado.
Método de alteração da cor de fundo da tabela :
Adicione a tabela ao 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), registro são os dados da linha atual, índice é o
índice subscrito > 0 são os segundos dados, determine se os segundos dados são iguais aos do primeiro nó de dados
CSS ：
<style lang="less" scoped>
/deep/.blue-back {
background-color: #ffff00;
}
</style>
Efeito finalizado: o
nó não é contínuo: o
número de série não é contínuo:
além disso: também é necessário adicionar dois botões para mover para cima e para baixo, aqui os dados de transmissão de fundo foram classificados de acordo com o número de série de grande a pequeno , então o deslocamento do botão tem pouco efeito.