根據條件動态修改element 元件深層次樣式

開發前提： vue elementUI

在開發中有時候 element 中我們使用的某個元件的樣式不符合我們的需求，直接寫行内樣式，有時候會發現并不會生效，直接将樣式寫在

style

标簽中雖然樣式會生效，但是不符合我們動态修改樣式的需求。

是以可以考慮在給 使用的ui元件 動态添加一個類名，或套上一個

div

，動态在這

div

上添加類名，然後再下方

style

對應類名下寫 要修改的 元件樣式。

下面貼上我的代碼：

<div class="item">
    <el-radio :class="[isBin ? 'blockClass' : 'flexClass']" :label="info.mobile">
      <div class="box">
        <div class="info">
          <div class="title">流量跟進人：</div>
          <div class="text">{{ selectedUser.nickname }}</div>
        </div>
      </div>
    </el-radio>
  </div>
           

效果圖：

前景：我這裡使用的

el-radio

元件，可以看到圖中有一個選中框，在某些條件下我們不需要展示它。

做法： 直接給

el-radio

添加一個類名，再通過條件判斷是否要添加這個類名。

樣式：

注意不要給自己的添加的類名，前面添加

/deep/

,不然可能導緻樣式不生效。

.blockClass {
  // display: block !important;
  /deep/.el-radio__input {
    display: none !important;
  }
}
.flexClass {
  display: flex !important;
  /deep/.el-radio__input {
    display: flex !important;
  }
}
           

貼上修改後的效果圖：

前面的選中框成功都被隐藏了

以上隻是個人遇到的問題，實際情況實際分析，可以直接打開控制台檢視html渲染層級和類名，來決定如何修改。