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

```

今天的分享就到到这里，希望对你有所帮助！如果觉得有用，不要忘了点个赞呦~

听说喜欢点赞的你，今年年终奖拿到手软😍