线路弹窗背景颜色改变

  今天接到新任务，路径详情中需要新增加提示。序号改为router_id, 然后第一条数据的当前节点与下一个节点需要相同，否则列表背景颜色改变。router_id需要从1开始连贯显示，否则也进行背景颜色改变的提示。思考许久，在同事的帮助下终于完成，本人智商堪忧。

从后台获取数据方法：

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; 为边界处理，两个内容进行比较，如何不减一的话，会造成数组越界。
this.dataSource[i].nextNode 为当前路径的下一个节点参数
this.dataSource[i+1].curNode为下一个路径的当前节点参数
判定如果不等于，则提示信息。

更改表格背景颜色方法：
在a-table中加入属性: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为第二条数据，判定第二条数据与第一条数据节点是否相同

CSS：

<style lang="less" scoped>
  /deep/.blue-back {
    
    
    background-color: #ffff00;
  }
</style>

完成效果：

节点不连续：

序号不连续：

另外：还要求增加两个按钮上下移位，此处后台传输数据已经按照序号从大到小排序，所以按钮移位作用不大。