实现效果
点击某行添加动态类,实现背景动态添加,并且移除其他元素的背景 ,点击最后一列的某一行要有弹窗。不能使用: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来动态添加