主题样式修改

曾经为了修改组件风格，一个项目用了上百个样式穿透，后来才发现定制一个主题就够了！

第一步，在官网的主题页面，修改背景色、字体颜色及边框颜色

第二步，下载主题

第三步，用下载的css文件替换掉默认的css文件

效果如下：

el-backtop 回到顶部组件

有时候页面很长，我们需要一个回到顶部的按钮，推荐大家使用 el-backtop，自带过渡效果。

代码如下：

<template>  <div class="container">    <div class="box">Scroll down to see the bottom-right button.</div>    <el-backtop target=".container">      <i class="el-icon-caret-top"></i>    </el-backtop>  </div></template><style lang="scss" scoped>.container {  height: 100vh;  overflow-x: hidden;  .box {    padding: 20px;    height: 1500px;  }}</style>

注意：需要将 body 的 margin 设置为 0，不然会出现两个滚动条。

el-form-item label宽度自适应

通常我们是给 label 设置一个固定宽度，但这完全限制了 UI 的发挥，如何让 label 宽度自适应呢？答案是给控件设置一个固定宽度。

代码如下：

<template>  <el-form>    <el-form-item label="教师">      <el-input v-model="form.teacher" style="width: 625px;"></el-input>    </el-form-item>    <el-form-item label="请选择在线教学平台名称">      <el-select v-model="form.platform" style="width: 500px;">        <el-option label="平台一" value="1"></el-option>        <el-option label="平台二" value="2"></el-option>      </el-select>    </el-form-item>  </el-form></template><script>export default {  data() {    return {      form: {        teacher: '',        platform: ''      }    }  }}</script>

el-form-item 循环校验

有时候表单项是一个循环的列表，需要对每一项进行校验。

代码如下：

<template>  <div>    <el-form :model="form" label-width="100px" ref="form">      <el-form-item        v-for="(item, index) in form.list"        :key="index"        :label="'评价项目' + (index + 1)"        :prop="'list.' + index + '.evaluateName'"        :rules="rules.evaluateName"      >        <el-input v-model="item.evaluateName" />      </el-form-item>      <el-form-item>        <el-button type="primary" @click="submitForm">提交</el-button>      </el-form-item>    </el-form>  </div></template><script>export default {  data() {    return {      form: {        list: [          {            evaluateName: ''          },          {            evaluateName: ''          },          {            evaluateName: ''          }        ]      },      rules: {        evaluateName: [          {            required: true,            message: '请输入评价项目',            trigger: 'blur'          }        ]      }    }  },  methods: {    submitForm() {      this.$refs.form.validate(valid => {        if (valid) {          alert('submit!')        } else {          console.log('error submit!!')          return false        }      })    }  }}</script>

el-form-item 表单嵌套表格校验

如果在表单里嵌套表格，那么如何对表格里面的控件进行校验呢？

代码如下：

<template>  <el-form :model="form" ref="form">    <el-table border :data="form.list" style="margin-bottom: 10px;">      <el-table-column        label="评价项目"        prop="evaluateName"        align="center"      ></el-table-column>      <el-table-column label="评价等级" align="center">        <template slot-scope="scope">          <el-form-item            :prop="'list.' + scope.$index + '.evaluateLevel'"            :rules="rules.evaluateLevel"            class="evaluate-level"          >            <el-radio-group class="radio-group" v-model="scope.row.evaluateLevel">              <el-radio                v-for="evaluationItem in evaluateOptions"                :key="evaluationItem.value"                :label="evaluationItem.value"              >                {{ evaluationItem.label }}              </el-radio>            </el-radio-group>          </el-form-item>        </template>      </el-table-column>    </el-table>    <el-form-item>      <el-button type="primary" class="submit-btn" @click="submitOpinionCheck">        提交      </el-button>    </el-form-item>  </el-form></template><script>export default {  data() {    return {      form: {        list: [          {            id: '01',            evaluateName: '指标一',            evaluateLevel: ''          },          {            id: '02',            evaluateName: '指标二',            evaluateLevel: ''          },          {            id: '03',            evaluateName: '指标二',            evaluateLevel: ''          }        ]      },      evaluateOptions: [        {          value: '1',          label: '优'        },        {          value: '2',          label: '良'        },        {          value: '3',          label: '中'        },        {          value: '4',          label: '差'        }      ],      rules: {        evaluateLevel: [{ required: true, message: '请选择评价等级', trigger: 'change' }]      }    }  },  methods: {    submitOpinionCheck() {      this.$refs.form.validate(valid => {        if (valid) {          alert('submit!')        } else {          console.log('error submit!!')          return false        }      })    }  }}</script><style lang="scss" scoped>.evaluate-level {  ::v-deep .el-form-item__error {    width: 100px;    /* 使校验信息居中 */    left: calc(50% - 50px);  }}</style>

el-form-item 表单校验 label只保留 *

有时候我们只需要表单校验的 *， 而不需要 lable 文字，像这样：

代码如下：

<template>  <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="30px">    <el-form-item label=" " prop="name">      <el-input v-model="ruleForm.name" placeholder="请输入活动名称"></el-input>    </el-form-item>    <el-form-item label=" " prop="region">      <el-select v-model="ruleForm.region" placeholder="请选择活动区域">        <el-option label="区域一" value="shanghai"></el-option>        <el-option label="区域二" value="beijing"></el-option>      </el-select>    </el-form-item>    <el-form-item>      <el-button type="primary" @click="submitForm('ruleForm')">提交</el-button>    </el-form-item>  </el-form></template><script>export default {  data() {    return {      ruleForm: {        name: '',        region: ''      },      rules: {        name: [{ required: true, message: '请输入活动名称', trigger: 'blur' }],        region: [{ required: true, message: '请选择活动区域', trigger: 'change' }]      }    }  },  methods: {    submitForm(formName) {      this.$refs[formName].validate(valid => {        if (valid) {          alert('submit!')        } else {          console.log('error submit!!')          return false        }      })    }  }}</script>

el-select 下拉框样式修改

使用样式穿透修改下拉框样式，你会发现打死都不生效，那是因为下拉框是默认挂载在 body 下面。解决办法：设置 :popper-append-to-body="false"

代码如下：

<template>  <el-form>    <el-form-item label="活动区域">      <el-select        class="form-select"        :popper-append-to-body="false"        v-model="form.region"        placeholder="请选择活动区域"      >        <el-option label="区域一" value="shanghai"></el-option>        <el-option label="区域二" value="beijing"></el-option>      </el-select>    </el-form-item>  </el-form></template><script>export default {  data() {    return {      form: {        region: ''      }    }  }}</script><style lang="scss" scoped>.form-select {  ::v-deep .el-select-dropdown__item.selected {    background: pink;  }}</style>

el-input 打开弹框 自动聚焦

很多时候 form 表单是嵌套在 dialog 下面，为了提高用户体验，需要在打开弹框后 input 框自动聚焦。

代码如下：

<template>  <div>    <el-button type="text" @click="showDialog">      打开嵌套表单的 Dialog    </el-button>    <el-dialog title="活动" :visible.sync="dialogVisible">      <el-form :model="form">        <el-form-item label="活动名称" label-width="80px">          <el-input ref="nameInput" v-model="form.name"></el-input>        </el-form-item>        <el-form-item label="活动内容" label-width="80px">          <el-input v-model="form.content"></el-input>        </el-form-item>      </el-form>      <div slot="footer" class="dialog-footer">        <el-button @click="dialogVisible = false">取 消</el-button>        <el-button type="primary" @click="dialogVisible = false">确 定</el-button>      </div>    </el-dialog>  </div></template><script>export default {  data() {    return {      dialogVisible: false,      form: {        name: '',        content: ''      }    }  },  methods: {    showDialog() {      this.dialogVisible = true      // 如果弹框显示，则自动聚焦      this.$nextTick(() => {        this.$refs.nameInput.focus()      })    }  }}</script>

今天的分享就到到这里。如果觉得有用，不要忘了点个赞呦~