5、el-input type=number 输入中文,焦点上移
6、el-input type=number 去除聚焦时的上下箭头
9、el-dialog 的 destroy-on-close 属性设置无效
15、el-form-item 表单校验 label只保留 *
18、改变表头样式
1、el-scrollbar 滚动条
看到这个组件是不是有点陌生,陌生就对了,因为它从来没有出现在 element 官网上(估计是性能问题),但好东西怎么能藏着掖着,来上效果图。
是不是比原生的滚动条美观多了,使用方法也非常简单:
<el-scrollbar>
<div class="box">
<p v-for="item in 15" :key="item">欢迎使用 el-scrollbar {{item}}</p>
</div>
</el-scrollbar>
<style scoped>
.el-scrollbar {
border: 1px solid #ddd;
height: 200px;
}
.el-scrollbar ::v-deep .el-scrollbar__wrap {//显示让滚动条
overflow-y: scroll;
overflow-x: hidden;
}
</style>
只要 scrollbar 内部盒子的高度超过 scrollbar 的高度就会出现滚动条,横向滚动条同理。
2、el-upload 模拟点击
有时候我们想用 el-upload 的上传功能,但又不想用 el-upload 的样式,如何实现呢?方法也很简单,隐藏 el-upload,然后再模拟点击就可以了。
<button @click="handleUpload">上传文件</button>
<el-upload
v-show="false"
class="upload-resource"
multiple
action=""
:http-request="clickUploadFile"
ref="upload"
:on-success="uploadSuccess"
>
上传本地文件
</el-upload>
<script>
export default {
methods: {
// 模拟点击
handleUpload() {
document.querySelector(".upload-resource .el-upload").click()
},
// 上传文件
async clickUploadFile(file) {
const formData = new FormData()
formData.append('file', file.file)
const res = await api.post(`xxx`, formData)
}
// 上传成功后,清空组件自带的文件列表
uploadSuccess() {
this.$refs.upload.clearFiles()
}
}
}
</script>
3、el-select 下拉框选项过长
很多时候下拉框的内容是不可控的,如果下拉框选项内容过长,势必会导致页面非常不协调,解决办法就是,单行省略加文字提示。
<el-select popper-class="popper-class" :popper-append-to-body="false" v-model="value" placeholder="请选择">
<el-option
v-for="item in options"
:key="item.value"
:label="item.label"
:value="item.value"
>
<el-tooltip
placement="top"
:disabled="item.label.length<17"
>
<div slot="content">
<span>{{item.label}}</span>
</div>
<div class="iclass-text-ellipsis">{{ item.label }}</div>
</el-tooltip>
</el-option>
</el-select>
<script>
export default {
data() {
return {
options: [{
value: '选项1',
label: '黄金糕黄金糕黄金糕黄金糕黄金糕黄金糕黄金糕黄金糕黄金糕'
}, {
value: '选项2',
label: '双皮奶双皮奶双皮奶双皮奶双皮奶双皮奶双皮奶双皮奶双皮奶'
}, {
value: '选项3',
label: '蚵仔煎蚵仔煎蚵仔煎蚵仔煎蚵仔煎蚵仔煎蚵仔煎蚵仔煎蚵仔煎'
}],
value: ''
}
}
}
</script>
<style scoped>
.el-select {
width: 300px;
}
.el-select ::v-deep .popper-class {
width: 300px;
}
.iclass-text-ellipsis {//让下拉内容超出部分用"..."显示
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
</style>
效果如下:
select组件,在局部DOM全屏的情况下,下拉框不见了。设置:popper-append-to-body=false,就可以解决;如果是整个页面全屏,则正常。
4、el-input 首尾不能为空格
我们在使用 input 输入框时,大多不希望用户在前后输入空格,有没有简单的校验方法呢,当然是有的。
<el-form :rules="rules" :model="form" label-width="80px">
<el-form-item label="活动名称" prop="name">
<el-input v-model="form.name"></el-input>
</el-form-item>
</el-form>
<script>
export default {
data() {
return {
form: {
name: ''
},
rules: {
name: [
{ required: true, message: '请输入活动名称', trigger: 'blur'},
{ pattern: /^(?!\s+).*(?<!\s)$/, message: '首尾不能为空格',trigger: 'blur' }//利用验证规则(正则表达式)
]
}
}
}
}
</script>
效果如下:
5、el-input type=number 输入中文,焦点上移
当 el-input 设置 type="number" 时,输入中文,虽然中文不会显示出来,但焦点会上移。
解决办法:
<style scoped>
::v-deep .el-input__inner {
line-height: 1px !important;//设置行高
}
</style>
6、el-input type=number 去除聚焦时的上下箭头
解决办法:
<el-input class="input" type="number"></el-input>
<style scoped>
.input ::v-deep input[type="number"]::-webkit-outer-spin-button,
.input ::v-deep input[type="number"]::-webkit-inner-spin-button {
-webkit-appearance: none !important;
}
</style>
7、el-form 只校验表单其中一个字段
有时候我们需要单独校验一些字段,比如发送验证码,单独对手机号进行校验,可以这样做:
this.$refs.form.validateField('name', valid => {
if (valid) {
console.log('send!');
} else {
console.log('error send!');
return false;
}
})
8、el-dialog 重新打开弹窗,清除表单信息
有人会在打开弹窗时,在$nextTick里重置表单,而我选择在关闭弹窗后进行重置:
<el-dialog @closed="resetForm">
<el-form ref="form">
</el-form>
</el-dialog>
<script>
export default {
methods: {
resetForm() {
this.$refs.form.resetFields()
}
}
}
</script>
9、el-dialog 的 destroy-on-close 属性设置无效
destroy-on-close 设置为 true 后发现弹窗关闭后 DOM 元素仍在,没有被销毁。
解决办法:在 el-dialog 上添加 v-if。(使用v-if,操作dom,会影响性能)
<el-dialog :visible.sync="visible" v-if="visible" destroy-on-close>
</el-dialog>
10、el-table 表格内容超出省略
当表格内容过长时,手动添加样式比较麻烦,偷偷告诉你,只需要添加一个 show-overflow-tooltip 就可以搞定。
<el-table-column
prop="address"
label="地址"
width="180"
show-overflow-tooltip
>
</el-table-column>
效果如下:
11、主题样式修改
曾经为了修改组件风格,一个项目用了上百个样式穿透,后来才发现定制一个主题就够了!
第一步,在官网的主题页面,修改背景色、字体颜色及边框颜色
第二步,下载主题
第三步,用下载的css文件替换掉默认的css文件
效果如下:
12、el-backtop 回到顶部组件
有时候页面很长,我们需要一个回到顶部的按钮,推荐大家使用 el-backtop(ElementUI官网自带
Backtop 回到顶部 | Element Plus)
,自带过渡效果。
代码如下:
<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,不然会出现两个滚动条。
13、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>
复制代码
14、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>
15、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>
16、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' }],//required: true这个就能实现
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>
17、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>
18、el-input 打开弹框 自动聚焦
很多时候 form 表单是嵌套在 dialog 下面,为了提高用户体验,需要在打开弹框后 input 框自动聚焦。(就是打开对话框鼠标输入线"|"在第一个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>
18、改变表头样式:
<el-table :data="dataList"
:header-cell-style="{'color':'#fff','background':'#5862A0'}"//改变表头样式
>
<el-table-column prop="sqsj" label="授权时间" />
<el-table-column prop="wxid" label="微信ID" />
<el-table-column prop="dhhm" label="电话号码" />
<el-table-column prop="wxnc" label="微信昵称" />
</el-table>
作者:前端阿飞
链接:https://juejin.cn/post/7041320033884045326
来源:稀土掘金