theme: cyanosis highlight: atom-one-light

主题样式修改

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

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

第二步，下载主题

第三步，用下载的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>

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

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

版权声明：著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。 作者: 前端阿飞 原文链接：https://juejin.im/post/7041320033884045326