# select加上multiple属性后，默认触发change事件进行验证
created() {
this.$nextTick(()=>{
this.$refs.ruleFormRef.resetFields();
})
}
# 上传控件为必填项，上传图片后清空提示信息
只需要在上传组件上绑定ref，在on-success钩子中调用this.$refs.XXX.clearValidate()，就可以清除
this.$refs.image.clearValidate();
# 进行校验后控制台提示async-validator验证警告
- 在node_modules文件夹中找到async-validator文件夹中的es下的util.js文件，整个的路径：node_modules > async-validator > es > util.js
- 注释util.js中的输出日志（14行），注释掉即可
# el-dropdown-item / el-breadcrumb-item 点击无效
在使用 element-ui 组件库时，经常会用到类似 el-breadcrumb面包屑 或者 Dropdown下拉菜单的组件。有时需要在子项上添
加click事件，但是官⽅⽂档中并没有给出 el-dropdown-item / el-breadcrumb-item 的点击事件
若直接在el-dropdown-item / el-breadcrumb-item上添加click事件，点击后没有任何反应
在click后添加 .native 修饰符，则可解决问题，修饰符 .native -- 可用于监听组件根元素的原生事件
<el-dropdown>
<span class="el-dropdown-link">
下拉菜单<i class="el-icon-arrow-down el-icon--right"></i>
</span>
<el-dropdown-menu slot="dropdown">
<el-dropdown-item @click.native="handleClick">黄⾦糕</el-dropdown-item>
<el-dropdown-item @click.native="handleClick">狮⼦头</el-dropdown-item>
<el-dropdown-item @click.native="handleClick">螺蛳粉</el-dropdown-item>
</el-dropdown-menu>
</el-dropdown>
<el-breadcrumb separator-class="el-icon-arrow-right">
<el-breadcrumb-item :to="{ path: '/' }">⾸页</el-breadcrumb-item>
<el-breadcrumb-item @click.native="handleClcik">活动管理</el-breadcrumb-item>
<el-breadcrumb-item @click.native="handleClcik"活动列表</el-breadcrumb-item>
<el-breadcrumb-item @click.native="handleClcik">活动详情</el-breadcrumb-item>
</el-breadcrumb>
# el-date-picker 动态限制时间范围,精确到分秒
<el-form-item prop="timeData">
<el-date-picker type="datetime" v-model="form.timeData.valueStart" :picker-options="pickerOptionsTwo" placeholder="请选择开始时间" @change="valueStartBtn" popper-class="DateTimePicker">
</el-date-picker>
<el-date-picker type="datetime" v-model="form.timeData.valueEnd" :picker-options="pickerOptions" placeholder="请选择结束时间" @change="valueEndBtn" popper-class="DateTimePicker">
</el-date-picker>
<!-- <el-date-picker v-model="value1" format="yyyy-MM-dd HH:mm" type="datetimerange" range-separator="至" start-placeholder="开始日期"
end-placeholder="结束日期" popper-class="DateTimePicker">
</el-date-picker> -->
</el-form-item>
<script>
export default{
data(){
return {
pickerOptionsTwo: {
// step: '00:10:00',
// start: '00:00:00',
// end: '20:59:59',
// 时间不能大于当前时间
disabledDate(time) {
return time.getTime() < Date.now() - 3600 * 24 * 1000
},
selectableRange: '00:00:00 - 23:59:59',
format:'HH:mm'
},
//时间框设置
pickerOptions: {
selectableRange: '00:00:00 23:59:59',
format:'HH:mm',
disabledDate: (time) => {
return time.getTime() > this.form.timeData.valueStart + 3600 * 4 * 1000 || time.getTime() < Date.now() - 3600 * 24 * 1000
}
},
}
},
watch: {
'form.timeData.valueStart': {
handler(newName, oldName) {
// moment(this.form.timeData.valueStart).format('YYYY-MM-DD') === moment(Date.now()).format('YYYY-MM-DD') ? :
if (moment(newName).format('YYYY-MM-DD') === moment(Date.now()).format('YYYY-MM-DD')) {
console.log(newName)
this.pickerOptionsTwo.selectableRange = `${moment(new Date().getTime()).format('HH:mm:ss')} - 23:59:59`
} else {
this.pickerOptionsTwo.selectableRange = '00:00:00 - 23:59:59'
}
},
deep: true,
immediate: true
},
'form.timeData.valueEnd': {
handler(newName, oldName) {
const dateDiff = moment(moment(this.form.timeData.valueStart).subtract(-1, 'day').format('YYYY-MM-DD')).diff(moment(this.form.timeData.valueStart), 'm')
if (dateDiff >= 240) {
this.pickerOptions.selectableRange = `${moment(this.form.timeData.valueStart).format('HH:mm:ss')} - ${moment(this.form.timeData.valueStart + 3600 * 4 * 1000).format('HH:mm:ss')}`
} else {
if (moment(this.form.timeData.valueStart).format('YYYY-MM-DD') === moment(newName).format('YYYY-MM-DD')) {
this.pickerOptions.selectableRange = `${moment(this.form.timeData.valueStart).format('HH:mm:ss')} - 23:59:59`
} else {
this.pickerOptions.selectableRange = `00:00:00 - ${moment(this.form.timeData.valueStart + 3600 * 4 * 1000).format('HH:mm:ss')}`
}
}
},
deep: true,
immediate: true
}
}
}
</script>
# table表头超出隐藏
<el-table>
<el-table-column v-for="item in headerList"
:prop="item.prop" :label="item.label :key="item.prop>
<template slot="header" slot-scope="scope">
<el-tooltip :content="scope.column.label">
<span>{{scope.column.label}}</span>
</el-tooltip>
</template>
</el-table-column>
</el-table>
<style>
.el-table{
th{
.cell{
white-space:nowrap !important;
text-overflow:ellipsis;
word-break:break-all;
}
}
}
</style>
# clearValidate()和resetFields()清除表单校验的区别
# clearValidate的使用
<Form ref="form" rule={this.rules}>
<FormItem prop="name" label="姓名">
<Input/>
</FormItem>
<FormItem prop="age" label="年龄">
<Input/>
</FormItem>
</Form>
// 根据判断条件, 移除所有表单项的校验
if (/*条件*/) {
this.$refs['form'].clearValidate();
}
// 但是有时候只需要移除其中的某一项校验, 如只移除姓名的校验:
if (/*条件*/) {
this.$refs['form'].clearValidate(['name']);
}
注意
有可能this.refs[form].clearValidate()方式不识别。需要使用:this.refs.form.clearValidate()
# element-ui中的表单校验
<el-form :label-width="120" :rules="formRules" :model="form" ref="form">
<el-form-item label="活动名称" prop="name">
<el-input v-model="form.name"></el-input>
</el-form-item>
</el-form>
<el-button type="info" @click="save">保存</el-button>
<el-button type="info" @click="empty">重置</el-button>
// 校验规则
formRules: {
name: [
{ required: true, message: '请输入活动名称', trigger: 'blur' },
{ min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' }
],
}
/**
* 保存函数
*/
save（） {
this.$refs[form].validate((valid) => {
if (valid) {
alert('submit!');
} else {
console.log('error submit!!');
return false;
}
});
}
})
empty（） {
/**
* 移除校验结果并重置字段值
* 注：清除表单项name的校验及数值
*/
this.$refs.form.resetFields();
/**
* 移除校验结果
* 注：只清除表单项name的校验，不清楚表单项name的数值
*/
this.$refs.form.clearValidate('name');
})
# 二者的区别
this.$refs.form.resetFields(); //移除校验结果并重置字段值
this.$refs.form.clearValidate(); //移除校验结果
# http-request 上传附件，并且还可以传参数
<el-upload
class="upload-demo"
action=""
:headers="importHeaders"
:http-request="(file)=>{return imggreySuccess(file ,scope.row)}"
multiple
:limit="3"
:file-list="fileList"
>
<el-button size="small">
点击上传
</el-button>
<div slot="tip" class="el-upload__tip">
可上传多个附件，且每个附件不超过2M
</div>
methods: {
imggreySuccess(params, row) {
const isLt2M = params.file.size / 1024 / 1024 < 2
// 通过 FormData 对象上传文件
var formData = new FormData()
formData.append('file', params.file)
// formData.append('FileName', params.file.name)
if (!isLt2M) {
this.$message.error('请上传2M以下的文件')
return false
}
// 设置header
this.importHeaders['X-AUTH-TOKEN'] = Cookies.get('X-AUTH-TOKEN') // token
this.upLoadData.fileType = `winBidNoticeAttachment_${row.typecode}`// 文件类型
axios.post(`${this.upLoadFileUrl}${createURL(this.upLoadData)}`, formData, {
headers: { 'X-AUTH-TOKEN': Cookies.get('X-AUTH-TOKEN') }
})
.then(function(res) {
})
.catch(function(err) {
console.error(err)
})
// 校验是否每条数据至少有一条数据 数据整理
// const fileObj = Object.assign(file)
// this.fileLists = this.performanceData
// this.fileLists.map(item => {
// if (item.typecode === row.typecode) {
// this.arrBuff.push(fileObj)
// item.arr = this.arrBuff
// return
// }
// })
}
}
# el-cascader 多选设置默认值
<el-cascader v-model="value" :options="options" :props="props" @change="handleChange" />
data(){
return {
props:{ multiple: true },
value:["5","6,11","7"],
options:[{
value: 1,
label: '东南',
children: [{
value: 2,
label: '上海',
children: [
{ value: 3, label: '普陀' },
{ value: 4, label: '黄埔' },
{ value: 5, label: '徐汇' }
]
}]
}]
}
}
# 重置表单
<!--el-form 中必须包含3个属性：model、ref、prop-->
<el-form :model="queryParams" ref="queryForm" label-width="150px">
<el-col :span="6">
<el-form-item label="调查表名" prop="codeTablename">
<el-select v-model="queryParams.code" placeholder="请选择调查表名" clearable>
<el-option v-for="(a, i) in list" :key="i" :label="a.name" :value="a.id"/>
</el-select>
</el-form-item>
</el-col>
</el-form>
← 常见问题