vue基于vue-seamless-scroll添加动态类的实现

实现效果

点击某行添加动态类，实现背景动态添加，并且移除其他元素的背景 ，点击最后一列的某一行要有弹窗。不能使用:class来动态添加类

html

<template>
  <div
    class="outerBox"
    @click.stop="itemClick($event)"
  >
    <!-- //表头标题 -->
    <div class="topTitle">
      <div>单位</div>
      <div style="color:#DAE7F2">
        <span class="fountColor"></span>已找到
      </div>
      <div><span class="unfountColor"></span>核实中</div>
      <div><span class="unmissingColor"></span>已脱失</div>
    </div>
    <!-- // :class-option 绑定的配置项 -->
    <vue-seamless-scroll
      :data="listData"
      class="seamless-warp"
      :class-option="classOption"
    >
      <!-- // 绑定index(或者直接放数据,JSON.stringify(item)) -->
      <div
        class="contantRoll"
        v-for="(item,index) in listData"
        :key="index"
        :data-index="index"
        :id="index"
        ref="nowIndex"
      >
        <div style="color:#DAE7F2">{{item.police}}</div>
        <div style="color:#DAE7F2">{{item.fount}}</div>
        <div style="color:#55FAFB">{{item.unfount}}</div>
        <div
          style="color:#FC464C;  cursor: pointer;"
          @click.stop="alterTable"
        >{{item.unmissing}}</div>
      </div>
    </vue-seamless-scroll>
  </div>
</template>

js  模拟数据尽量多

// 模拟数据
      listData: [
        {
          police: "xx分局",
          fount: "4368",
          unfount: "5389",
          unmissing: "89",
        },
        {
          police: "xx分局",
          fount: "8069",
          unfount: "3478",
          unmissing: "18",
        },
        {
          police: "xx分局",
          fount: "376",
          unfount: "745",
          unmissing: "45",
        },
        {
          police: "xx分局",
          fount: "4363",
          unfount: "5787",
          unmissing: "79",
        },
        {
          police: "xx分局",
          fount: "7036",
          unfount: "367",
          unmissing: "52",
        },
        {
          police: "xx分局",
          fount: "382",
          unfount: "7456",
          unmissing: "25",
        },
        {
          police: "xx分局",
          fount: "6382",
          unfount: "3456",
          unmissing: "55",
        },
        {
          police: "xx分局",
          fount: "4182",
          unfount: "1456",
          unmissing: "15",
        },
        {
          police: "xx分局",
          fount: "5262",
          unfount: "556",
          unmissing: "125",
        },
      ],

js方法

    // 设置表格样式
    handlerMapSetTable(arr) {
      arr.forEach((element) => {
        // console.log(element.firstChild.innerText);
        if (element.firstChild.innerText === this.nowRegion) {
          // console.log(element);
          const nowNodeIndex = element.dataset.index;
          // // 因为有两个元素，需要解决
          const firstnodeArr =
            element.parentNode.parentNode.firstChild.childNodes;
          const lastnodeArr =
            element.parentNode.parentNode.lastChild.childNodes;
          this.commondMethod(nowNodeIndex, firstnodeArr, lastnodeArr);
        }
      });
    },
    // 表格子元素点击事件
    itemClick(e) {
      e.path[1].className = "contantRoll";
      let length = e.path.length;
      let labelIndex = -1;
      // 找到为1 未找到-1
      for (let i = 0; i < length; i++) {
        if (e.path[i].className === "contantRoll") {
          labelIndex = i;
          break;
        } else {
          labelIndex = -1;
        }
      }
      if (labelIndex !== -1) {
        const nowNodeIndex = e.path[labelIndex].dataset.index;
        // 因为有两个元素，需要解决
        const firstnodeArr =
          e.path[labelIndex].parentNode.parentNode.firstChild.childNodes;
        const lastnodeArr =
          e.path[labelIndex].parentNode.parentNode.lastChild.childNodes;
        this.commondMethod(nowNodeIndex, firstnodeArr, lastnodeArr);
      } else {
        // e.path[i].parentNode.className === "contantRoll";
        alert("未找到数据，请检查");
      }
    },
    // 公共方法
    commondMethod(nowNodeIndex, firstnodeArr, lastnodeArr) {
      // 循环解决类名问题
      firstnodeArr.forEach((element) => {
        if (element.dataset.index === nowNodeIndex) {
          element.className = "contantRoll handlerBg";
          // 拿到数据
          this.dataUpload(element.childNodes);
        } else {
          element.className = "contantRoll";
        }
      });
      lastnodeArr.forEach((element) => {
        if (element.dataset.index === nowNodeIndex) {
          element.className = "contantRoll handlerBg";
        } else {
          element.className = "contantRoll";
        }
      });
    },
    // 数据外传
    dataUpload(dataArr) {
      let data = [];
      dataArr.forEach((element) => {
        data.push(element.innerText);
      });
      this.$parent.$refs.drugPeoplesSearchEchart.dataArr = data;
    },

css

<style lang="scss" scoped>
$borderColor: #4f7dd9;
$fountColor: #6699ff;
$unfountColor: #55fafb;
$unmissingColor: #f36847;
.outerBox {
  float: right;
  width: 400px;
}
.seamless-warp {
  height: 180px;
  border: 1px solid $borderColor;
  overflow: hidden;
}

.topTitle {
  /* 表头样式 */
  display: flex;
  height: 30px;

  align-items: center;
  border: 1px solid $borderColor;
  font-size: 14px;
  color: #dae7f2;
  font-family: MicrosoftYaHei;
  .unmissingColor,
  .unfountColor,
  .fountColor {
    display: inline-block;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    margin-right: 7px;
  }
  .fountColor {
    background-color: $fountColor;
  }
  .unfountColor {
    background-color: $unfountColor;
  }
  .unmissingColor {
    background-color: $unmissingColor;
  }
}

.topTitle {
  > div {
    /* 每一个表头的样式 */
    width: 25%;
    text-align: center;
  }
}

.contantRoll {
  /* 滚动内容样式 */
  display: flex;
  border-top: 1px solid $borderColor;
}
.handlerBg {
  div {
    background: rgba(252, 70, 76, 0.24);
  }
}
.contantRoll {
  div {
    /* 滚动内容每一个项的样式 */
    width: 25%;
    height: 30px;
    line-height: 30px;
    text-align: center;
    /* background: rgb(16, 19, 45); */
    // color: rgb(66, 255, 255);
    font-size: 14px;
  }
}
</style>

目前想到的原生js去查找节点，因为存在html拷贝，不能使用:class来动态添加