利用jquery修改elment的自定义组件多选框el-select（修改多选框的颜色）

先上图片

一实现逻辑  我们知道element颜色默认为灰色，首先便签名称是唯一的，我的实现逻辑是后端传给前端

含有颜色，名称的数组，然后vue记录一个对象{名称 => 颜色}，当用户选择标签之后，触发

点击事件，然后去除框中的名称，然后一一渲染颜色。

二代码实现

[code]handleExpandChange() {
this.$nextTick(function () {
let cc = this.$refs['myCascader'].popperJS
if (cc != null) {
let c = cc._popper
let b = c.getElementsByClassName('el-cascader-panel')
let d = b[0].childNodes
                      //修改列表
//增加按钮
if(rightShow('CrmContact@getContactLabel')) {
let left = d[0];
if(left != null) {
let e = left.getElementsByClassName("el-scrollbar__view")
let child = e[0]
let childLength = child.getElementsByClassName("el-cascader-node");
if(childLength.length <= 5) {
$(child).append(`<li role="menuitem" id="cascader-menu-7218-0-3" tabindex="-1" class="el-cascader-node" aria-haspopup="true" aria-owns="cascader-menu-7218-0"><label class="el-checkbox"><span class="el-checkbox__input button-icon-color"><span class="el-icon-plus"></span><input type="checkbox" aria-hidden="false" class="el-checkbox__original" value=""></span></label><span class="el-cascader-node__label"><div type="button" class="button-add-tags" οnclick="vue.fn()"><tags:lang>新增标签</tags:lang></div></span></li>`)
}
}
}                   //修改标签颜色
//改变颜色
let f = d[1];
if(f != null) {
f.style.minWidth = "220px"
let e = f.getElementsByClassName("el-cascader-node");
for(let i = 0; i < e.length; i++) {
e[i].style.height = "40px"
let objLeft = e[i].getElementsByTagName("label")
objLeft[0].style.float = "right"
objLeft[0].style.marginLeft = "70px"
objLeft[0].style.bottom = "3px"
e[i].append(objLeft[0])

let obj = e[i].getElementsByTagName("span")
obj[0].style.backgroundColor = this.allTags[obj[0].innerHTML]['value']
obj[0].style.color = "#fff"
obj[0].style.maxWidth = "500px"
obj[0].style.maxHeight = "28px"
obj[0].style.textAlign = "center"
obj[0].style.lineHeight = "28px"
obj[0].title= e[i].innerHTML

}
}
}
})
},

如需源码，请评论你的邮箱