開發(fā)前提： vue elementUI
在開發(fā)中有時(shí)候 element 中我們使用的某個(gè)組件的樣式不符合我們的需求，直接寫行內(nèi)樣式，有時(shí)候會(huì)發(fā)現(xiàn)并不會(huì)生效，直接將樣式寫在 style 標(biāo)簽中雖然樣式會(huì)生效，但是不符合我們動(dòng)態(tài)修改樣式的需求。
因此可以考慮在給 使用的ui組件 動(dòng)態(tài)添加一個(gè)類名，或套上一個(gè) div ，動(dòng)態(tài)在這div上添加類名，然后再下方 style對(duì)應(yīng)類名下寫 要修改的 組件樣式。

下面貼上我的代碼：

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

效果圖：

前景：我這里使用的 el-radio 組件，可以看到圖中有一個(gè)選中框，在某些條件下我們不需要展示它。
做法： 直接給 el-radio 添加一個(gè)類名，再通過條件判斷是否要添加這個(gè)類名。
樣式：
注意不要給自己的添加的類名，前面添加 /deep/ ,不然可能導(dǎo)致樣式不生效。

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

貼上修改后的效果圖：
前面的選中框成功都被隱藏了
以上只是個(gè)人遇到的問題，實(shí)際情況實(shí)際分析，可以直接打開控制臺(tái)查看html渲染層級(jí)和類名，來決定如何修改。

總結(jié)

以上是生活随笔為你收集整理的根据条件动态修改element 组件深层次样式的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。