vue-ip地址池

<div class="ip_spread">
        <div v-for="(item, index) in rowData" :key="index" class="row">
          <div class="label">{{ item[0] }}</div>
          <div class="content">
            <div
              v-for="(sitem, sindex) in item"
              :key="sindex"
              :class="[
                'number',
                green.indexOf(sitem) > -1 ? 'green' : '', 
              ]"
            >
              {{ sitem.split(".")[3] }}
            </div>
          </div>
        </div>
      </div>

data() {
    return {
      colCount: 31,
      row: [],
      ipStart: [30, 0, 11, 0],
      ipEnd: [30, 0, 11, 255],
      green: ["30.0.11.1", "30.0.11.200","30.0.11.15", "30.0.11.23","30.0.11.50", "30.0.11.60","30.0.11.100", "30.0.11.60",
      "30.0.11.156", "30.0.11.230","30.0.11.75", "30.0.11.63","30.0.11.130", "30.0.11.120","30.0.11.99", "30.0.11.123"],
    };
  },
    created() {
    let i0 = 1,
      i1 = 1,
      i2 = 1,
      i3 = 1;
    if (this.ipEnd[0] - this.ipStart[0] > 0) {
      i0 = this.ipEnd[0] - this.ipStart[0] + 1;
    }
    if (this.ipEnd[1] - this.ipStart[0] > 1) {
      i1 = this.ipEnd[1] - this.ipStart[1] + 1;
    }
    if (this.ipEnd[2] - this.ipStart[2] > 0) {
      i2 = this.ipEnd[2] - this.ipStart[2] + 1;
    }
    if (this.ipEnd[3] - this.ipStart[3] > 0) {
      i3 = this.ipEnd[3] - this.ipStart[3] + 1;
    }
    let row = (i0 * i1 * i2 * i3) / (this.colCount + 1);
    for (let j = 0; j < row; j = j + 256 / (this.colCount + 1)) {
      for (let k = 0; k <= 255; k++) {
        let label = [this.ipStart[0], this.ipStart[1], this.ipStart[2], k];
        if (label.join(".") == this.ipEnd.join(".")) {
          this.row.push(label.join("."));
          break;
        }
        this.row.push(label.join("."));
      }
      if (this.ipStart[2] > 255) {
        this.ipStart[1] = this.ipStart[1] + 1;
        this.ipStart[2] = 0;
        if (this.ipStart[1] > 255) {
          this.ipStart[0] = this.ipStart[0] + 1;
          this.ipStart[1] = 0;
          this.ipStart[2] = 0;
        } else {
          this.ipStart[1] = this.ipStart[1] + 1;
        }
      } else {
        this.ipStart[2] = this.ipStart[2] + 1;
      }
    }
    let data = [];
    for (let i = 0; i < this.row.length; i = i + (this.colCount + 1)) {
      let data1 = [];
      for (let j = i; j < i + (this.colCount + 1); j++) {
        if (j < this.row.length) data1.push(this.row[j]);
      }
      data.push(data1);
    }
    this.row = data;
  },
  computed: {
    rowData() {
      console.log("row", this.row);
      return this.row;
    },
  },

  .ip_spread{
    border: 1px solid gainsboro;
    overflow:scroll;
    height: 450px;
}
.row {
  position: relative;
  width: 100%;
  height: 50px;
  line-height: 50px;
}
.label {
  position: absolute;
  width: 120px;
  left: 0;
  text-align: right;
}
.content {
  position: absolute;
  left: 130px;
  right: 0;
  text-align: left;
}
.number {
  display: inline-block;
  width: 30px;
  height:30px;
  padding: 2px;
  border-radius: 5px;
  margin-right: 10px;
  border: 1px solid gainsboro;
  text-align: center;
  line-height: 30px;
  background-color: #dcdcdc;
}
.green {
  background-color: green;
}
.white {
  background-color: #fff;
}