Element-UI 奇淫技巧第二彈！提升開發效率，延長摸魚時間~

---

theme: cyanosis highlight: atom-one-light

---

主題樣式修改

曾經為了修改組件風格，一個項目用了上百個樣式穿透，後來才發現定製一個主題就夠了！

第一步，在官網的主題頁面，修改背景色、字體顏色及邊框顏色

第二步，下載主題

第三步，用下載的css文件替換掉默認的css文件

效果如下：

el-backtop 回到頂部組件

有時候頁面很長，我們需要一個回到頂部的按鈕，推薦大家使用 el-backtop，自帶過渡效果。

代碼如下：

```js

``注意：需要將 body 的 margin 設置為 0，不然會出現兩個滾動條。`

el-form-item label寬度自適應

通常我們是給 label 設置一個固定寬度，但這完全限制了 UI 的發揮，如何讓 label 寬度自適應呢？答案是給控件設置一個固定寬度。

代碼如下：

```js

```

el-form-item 循環校驗

有時候表單項是一個循環的列表，需要對每一項進行校驗。

代碼如下：

```js

```

el-form-item 表單嵌套表格校驗

如果在表單裏嵌套表格，那麼如何對錶格里面的控件進行校驗呢？

代碼如下：

```js

```

el-form-item 表單校驗 label只保留 *

有時候我們只需要表單校驗的 *， 而不需要 lable 文字，像這樣：

代碼如下：

```js

```

el-select 下拉框樣式修改

使用樣式穿透修改下拉框樣式，你會發現打死都不生效，那是因為下拉框是默認掛載在 body 下面。解決辦法：設置 :popper-append-to-body="false"

代碼如下：

```js

```

el-input 打開彈框 自動聚焦

很多時候 form 表單是嵌套在 dialog 下面，為了提高用户體驗，需要在打開彈框後 input 框自動聚焦。

代碼如下：

```js

```

今天的分享就到到這裏，希望對你有所幫助！如果覺得有用，不要忘了點個贊呦~

聽説喜歡點讚的你，今年年終獎拿到手軟😍