通过判断子元素条件给父元素添加样式

问题描述

使用el-table为基础的组件,没有办法判断直接为父元素添加样式,只能用子元素的值进行判断来给父级添加需要的图片样式

解决方法:

开始我是直接通过css来进行控制的

// 通过:has伪类选择器
// class_tag为添加判断条件后给对应子元素添加的class
/deep/ .tag:has(.class_tag) {

   color: #409eff;

   background-image: url('./图片.svg') !important;

   background-repeat: no-repeat !important;

   background-size: 23px 23px !important;

}

---

使用之后出现了一个问题 :has作为近几年加入的伪类选择器并不是所有浏览器都支持,所以我改用写一个方法用dom来控制

解决方案：

    classTag() {
      var parents = document.querySelectorAll('.tag');
      // 遍历父元素
      parents.forEach(function(parent) {
        // 检查是否有符合条件的子元素
        if (parent.querySelector('.class_tag')) {
          // 添加特定样式或执行其他操作
          parent.style.color = '#409eff';
          parent.style.backgroundImage = `url(${require('./图片.svg')})`;
          parent.style.backgroundRepeat = 'no-repeat';
          parent.style.backgroundSize = '23px 23px';
        } else {
          if (parent.querySelector('.class_noTag')) {
            parent.style.color = '#409eff';
            parent.style.backgroundImage = ``;
          }
        }
      });
    },

这样就解决了这个问题