# 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行），注释掉即可
# dropdown-item/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的使用
<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>
# 调整el-input样式
<el-input v-model="inputTags" placeholder="请输入" class="tags-input"/>
<style>
.tags-input{
width: 6rem !important;
height: 2.1875rem !important;
border: 1px solid #4b72ff !important;
border-radius: .3125rem !important;
background: #a7c7f0 !important;
margin-left: .3125rem;
:deep(.el-input__wrapper){
width: 8rem !important;
background: #a7c7f0 !important;
border: 0 !important;
font-size: .875rem;
}
// placeholder 的颜色
:deep(.el-input__inner::placeholder){
color: #666666 !important;
font-size: .875rem;
}
:deep(.el-input__inner){
color: #006fff !important;
font-size: .875rem;
border: 0 !important;
}
}
</style>
# 调整el-select样式
<el-select class="select" popper-class="popper" placeholder="请选择" v-model="value">
<el-option v-for="item in a" :key="item.value" :label="item.label" :value="item.value"/>
</el-select>
<style>
.select{
width: 3.75rem;
padding: 0;
background: none !important;
border: none;
box-shadow: none;
font-size: .875rem;
line-height: 2.125rem;
}
:deep(.el-select__wrapper) {
background:none;
box-shadow: none;
padding: 0;
margin: 0;
border: none;
height: 2.125rem;
min-height: 2.125rem;
line-height: 2.125rem;
font-size: .875rem;
}
:deep(.el-select__wrapper:hover) {
background:none;
box-shadow: none;
padding: 0;
margin: 0;
border: none;
height: 2.125rem;
min-height: 2.125rem;
line-height: 2.125rem;
font-size: .875rem;
}
// placeholder 的颜色
:deep(.el-select__placeholder){
color: #006fff !important;
}
// 下拉图标颜色
:deep(.el-select__caret){
color: #006fff !important;
}
// app 文件中
.select-popper {
background-color: rgba(6,47,111,0.4) !important; // 展开下拉背景
border: 0 !important; // 展开下拉边框
.el-popper__arrow::before {
border-top: 1px solid #062f6f !important; // 箭头按钮边框
background-color: #062f6f !important; // 箭头按钮背景色
}
.el-select-dropdown {
.is-hovering {
background-color: rgba(6,47,111,0.4); // 下拉hover背景
}
.el-select-dropdown__item {
font-size: .875rem !important;
}
}
.el-select-dropdown__item.is-disabled {
color: #868686 !important; // 禁用
}
.el-select-dropdown__item.is-selected {
color: #8fbeeb !important; // 选中
// font-weight: bold;
}
// 下拉列所有背景
.el-select-dropdown__list {
background-color: rgba(6,47,111,0.4);
}
}
</style>
# 调整el-pagination样式
<el-pagination class="page" layout="total,prev,pager,next" small background
:pager-count="3"
:page-size="pageSize"
:total="total"
@current-change="handleCurrentChange"/>
<style>
.page{
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
width: 80%;
margin-left: 10%;
margin-right: 10%;
font-size: 0.875rem;
}
:deep(.el-pagination) {
margin-top: .625rem;
font-size: 0.875rem !important;
}
:deep(.el-pager li){
font-size: 0.875rem !important;
}
:deep(.el-pagination--small input){
font-size: 0.875rem !important;
}
:deep(.el-pagination--small span){
font-size: 0.875rem !important;
}
</style>
# Menu二级菜单的样式修改el-popper
- 要在el-sub-menu标签下，写入自带属性popper-class=""，写入自定义类修改样式
<el-sub-menu :index="val.path" :key="val.path" popper-class="popper-menu">
<template #title>
<SvgIcon :name="val.meta.icon" :size="17" />
<span>{{ $t(val.name) }}</span>
</template>
<SubItem :chil="val.children" />
</el-sub-menu>
- popper-class的自定义类需要写在App.vue中才能获取到
.test {
border: none !important;
.el-menu {
// 修改二级菜单整个背景颜色
background-color:lightsteelblue;
// 二级菜单中的子选项
.el-menu-item {
background-color: transparent !important;
color: #fff !important;
font-weight: 400;
width: 100%;
font-size: 14px;
text-align: center;
// 被选择的子选项
&:not(.is-disabled):hover {
color: rgb(226, 195, 237) !important;
background-color: #7d85ca !important;
width: 100%;
text-align: center;
}
}
}
// 弹出的二级菜单
.el-menu--popup {
min-width: 6.5rem !important;
min-height: 7rem !important;
}
}
# el-cascader 选择器清空初始化方法
<el-cascader class="w500" ref="myMapCascader" :options="options"></el-cascader>
<script>
this.$refs.myMapCascader.$refs.panel.checkedValue = []; // 也可以指定值，默认是数组
this.$refs.myMapCascader.$refs.panel.clearCheckedNodes(); // 清空级联选择器选中状态
this.$refs.myMapCascader.$refs.panel.activePath = []; // 清除高亮
this.$refs.myMapCascader.$refs.panel.syncActivePath(); // 初始化（只展示一级节点）
</script>
# el-tree 的使用
<!--default-expand-all：默认全展开-->
<!--expand-on-click-node：是否在点击节点的时候展开或者收缩节点， 默认值为 true-->
<!--highlight-current：是否高亮当前选中节点，默认值是 false-->
<el-tree class="tree" :data="data" :props="defaultProps" @node-click="handleTree"
default-expand-all
:expand-on-click-node="false"
:highlight-current="true"/>
<style>
.tree {
background-color: #f8f8f8;
:deep(.el-tree-node__content){
height: 2.1875rem !important;
}
}
:deep(.el-tree--highlight-current .el-tree-node.is-current>.el-tree-node__content){
border-radius: 5px;
background-color: #eee !important;
}
</style>
# 自动触发 el-image 点击事件
- 在VUE2中
<!--隐藏的图片用于触发点击看大图 -->
<el-image ref="elImage" style="width: 0; height: 0; display: none" :src="url" :preview-src-list="list"/>
<el-button @click="getImg(img)"></el-button>
<script>
data() {
return {
list: [],
url: "",
};
},
methods: {
// 点击图片放大
getImg(event, img) {
// 阻止a标签跳转
event.preventDefault();
// 只有当点击到图片时才进行操作
if (event.target.tagName.toLowerCase() == "img") {
this.imageUrl = img
this.$refs.elImage.clickHandler()
}
},
}
</script>
- 在VUE3中
<!--隐藏的图片用于触发点击看大图 -->
<el-image ref="pRef" style="width:0; height:0; display: none;" :src="url" :preview-src-list="list" :preview-teleported="true"/>
<el-button @click="getImg(img)"></el-button>
<script>
const pRef = ref()
const curl:any = ref('')
const list:any = ref([])
const handleImg = (event:any, img:any) => {
// 阻止a标签跳转
event.preventDefault()
// 只有当点击到图片时才进行操作
if (event.target.tagName.toLowerCase() == "img") {
posterImgsCurl.value = img
console.log(img)
// 触发点击事件，这里增加延时，是因为初始化点击的时候el-image会先显示图片，再触发预览效果
setTimeout(() => {
pRef.value.$el.children[0].click()
}, 0)
}
}
</script>
← 常见问题