今日、新しいタスクを受け取りました。パスの詳細に新しいヒントが必要です。シリアル番号がrouter_idに変更され、最初のデータの現在のノードと次のノードが同じである必要があります。同じでない場合、リストの背景色が変わります。router_idは、1から継続して表示する必要があります。そうしないと、背景色を変更するためのプロンプトも実行されます。長い間考えていたのですが、ようやく同僚の助けを借りて完成しました。IQが心配です。
バックグラウンドからデータを取得する方法：
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;
})
},
主な検証部分：
// 校验连贯
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;は境界処理であり、2つのコンテンツが比較されます。1つ減らさない方法では、配列が境界を越えます。
this.dataSource [i] .nextNodeは、現在のパスの次のノードパラメータです
。this.dataSource[i + 1] .curNodeは、次のパスの現在のノードパラメータです。
等しくないと判断された場合、メッセージプロンプトが表示されます。
テーブル変更の背景色メソッド：
属性にaテーブルを追加します：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は現在の行データ、indexは添え字
index> 0は2番目のデータ、2番目のデータが最初のデータノードと同じかどうかを判断します
CSS：
<style lang="less" scoped>
/deep/.blue-back {
background-color: #ffff00;
}
</style>
完成した効果：
ノードが連続していない：
シリアル番号が連続していない：
さらに：上下に移動するために2つのボタンを追加する必要もあります。ここでは、バックグラウンド送信データがシリアル番号に従って大きいものから小さいものへとソートされています。 、したがって、ボタンシフトはほとんど効果がありません。