在Vue.js应用程序中使用JavaScript更改跨距中的文本颜色

我需要根据指定部门的外部值更改跨度中文本的颜色。我有一个应用程序，其中一家公司可以上传一份员工名册，其中包含分配给该人员的部门，我希望对同一部门的所有员工进行颜色编码。我不知道部门名称是什么，直到上传电子表格，颜色并不重要，只要它是不同的部门和一致的。我将颜色添加为一个类。但目前没有将它们用作类

       .kelly-vivid-yellow { color: #FFB300; }
       .kelly-strong-purple { color: #803E75; }
       .kelly-vivid-orange { color: #FF6800; }
       .kelly-very-light-blue { color: #A6BDD7; }
       .kelly-vivid-red { color: #C10020; }
       .kelly-grayish-yellow { color: #CEA262; }
       .kelly-medium-gray { color: #817066; }  
        plus others.

部门名称可以是：

      Admin
      Grounds
      Management
      Staff
      etc

或

还是别的什么

我正在考虑将所有颜色添加到数组中，例如

    kellyColors = ["#FFB300;","#803E75;","#FF6800;","#A6BDD7;" etc]

并为部门指定颜色。我将把所有部门添加到一个数组中，并根据数组中的位置为其分配颜色

       departments = ["Admin","Grounds","Management","Staff"]

       let Admin = kellyColor[0];    // Admin position in array is 0
       let Grounds = kellyColor[1];  // Grounds position in array is 1
        etc

但是我不知道如何更改span中的color属性，我在JavaScript函数中将其用作regex替换

             this.pubmedData[index]["publication"] = this.pubmedData[index] 
             ["publication"].replace(new RegExp(Employee_Name), match => {
              return  '<span  style="color:#803E75;"><b>' + match + '</b></span>';             
              });

---

我需要对员工姓名进行颜色编码，以显示他们是在同一个部门还是在不同的部门。我最基本的方法是使用数字生成N种颜色，并将它们均匀地隔开

考虑到色调可以从0到360度（但0和360当然是相同的色调），那么每个部门都可以有一种色调计算为

departmentIndex * 360/ departmentsLength 

因此，如果有两个部门，您将有色调0和色调180。 如果有三种颜色，则会有0、120和240等颜色

（将

部门长度合并为默认值1，以避免被零除）

一个非常基本的示例，使用60%饱和度和40%亮度，如下所示：


window.onload=（）=>{
新Vue({
el:“#应用程序”，
数据（）{
返回{
部门：[“销售”、“营销”]，
新部门名称：“”，
}
},
方法：{
addDepartment（）{
如果（此.newDepartmentName）{
this.departments.push（this.newDepartmentName）；
}
this.newDepartmentName=''；
},
颜色样式（deptIndex）{
返回`color:hsl（${this.hueStep*deptIndex}，60%，40%）；`；
}
},
计算：{
hueStep（）{
返回360/（this.departments.length | 1）；
},
过滤器：函数（）{
返回此.tarimas.filter(
tarima=>String（tarima.trabajo）
.包括（此.filteratarima）
);
}
}
});
};
#应用程序{
填充：0.5em；
}
#应用程序>分区{
边缘：0.2米；
边框：0.5px实心#eee；
}
#应用程序>分区b{
浮动：左；
最小宽度：60%；
}
#应用程序输入{
边界半径：3px；
边际：0.2米0；
填充：0.4em；
}

添加部门
{{department}}的样式{{{colorStyle（index）}}
IMHO最基本的方法是使用生成N种颜色并将它们均匀地隔开

考虑到色调可以从0到360度（但0和360当然是相同的色调），那么每个部门都可以有一种色调计算为

departmentIndex * 360/ departmentsLength 

因此，如果有两个部门，您将有色调0和色调180。
如果有三种颜色，则会有0、120和240等颜色

（将
部门长度合并为默认值1，以避免被零除）

一个非常基本的示例，使用60%饱和度和40%亮度，如下所示：


window.onload=（）=>{
新Vue({
el:“#应用程序”，
数据（）{
返回{
部门：[“销售”、“营销”]，
新部门名称：“”，
}
},
方法：{
addDepartment（）{
如果（此.newDepartmentName）{
this.departments.push（this.newDepartmentName）；
}
this.newDepartmentName=''；
},
颜色样式（deptIndex）{
返回`color:hsl（${this.hueStep*deptIndex}，60%，40%）；`；
}
},
计算：{
hueStep（）{
返回360/（this.departments.length | 1）；
},
过滤器：函数（）{
返回此.tarimas.filter(
tarima=>String（tarima.trabajo）
.包括（此.filteratarima）
);
}
}
});
};
#应用程序{
填充：0.5em；
}
#应用程序>分区{
边缘：0.2米；
边框：0.5px实心#eee；
}
#应用程序>分区b{
浮动：左；
最小宽度：60%；
}
#应用程序输入{
边界半径：3px；
边际：0.2米0；
填充：0.4em；
}

添加部门
{{department}}的样式{{{colorStyle（index）}}
我只想使用部门名称作为简单的css类

.department1{
color:#ff
}

然后检索该雇员的部门并将其传递给class属性

如果没有实际的数据，我可以说寻找部门价值

this.pubmedData[index]["publication"][department] // Exemple

然后用它来改变阿曲布他

 return  '<span  class="'+ department +'"><b>' + match + '</b></span>';

返回“”+匹配+“”；
我只想使用部门名称作为简单的css类

.department1{
color:#ff
}

然后检索该雇员的部门并将其传递给class属性

如果没有实际的数据，我可以说寻找部门价值

this.pubmedData[index]["publication"][department] // Exemple

然后用它来改变阿曲布他

 return  '<span  class="'+ department +'"><b>' + match + '</b></span>';

返回“”+匹配+“”；
this.pubmedData[index][“publication”]
您能否为此提供一个示例console.log？我在上面添加了信息，应该是员工名称而不是部门名称。我在上面修复了它我用你问题的初稿写了一个答案（部门必须有不同的颜色）我希望你能修改它来解决N元素->N颜色的一般问题flabs--我一定会尝试一下。谢谢
this.pubmedData[index][“publication”]
您能为这个提供一个示例console.log吗？我在上面添加了信息，应该是员工的名字而不是部门。我在上面修正了我用你问题的初稿写了一个答案（部门必须有不同的颜色），我希望你能适应