本文汇总了ElementUI在实际使用中遇到的问题，包括input placeholder样式、进度条颜色、默认样式修改、js事件失效、el-select下拉列表设置、键盘回车事件、日期选择器格式、表单验证、上传文件、树形控件、loading效果、对话框不自动关闭、自定义上传限制、表单清空验证等，并提供了详细的解决办法。
css
elementUI input 的 placeholder样式
.el-input__inner::-webkit-input-placeholder {
line-height: 20px;
}
进度条背景颜色
环形进度条
.test svg > path:first-of-type{
stroke: red !important;
}
条形进度条
.el-progress .el-progress-bar__outer {
background: #141935;
}
element UI -- 默认样式修改不成功的问题
问题：.el-input__inner {color: red;} ---- 修改之后样式不变
解决办法：去掉 style里的 scoped
js
在el-row 或者 el-col 上使用@click失效,
el-select下拉列表 设置默认值
给页面上的DOM元素加loading效果
checkbox-group多选框怎么选中id值
el-checkbox @change事件解析 及判断是否选中
触发el-select展开的事件
上传
elementui当日期组件设置为type=daterange 如何设置最大最小值
vue2.0 element-ui中input的@keyup.native.enter='onQuery'回车查询刷新整个表单的解决办法
中加上 onsubmit="return false" 变成
vue+element 键盘回车事件导致页面刷新的问题
el-from 加上 @submit.native.prevent
element-ui el-checkbox @change事件
想监测当前点击的el-checkbox 时，el-checkbox 的 @change可以传当前的id值，判断el-checkbox-group的v-model中是否含有该值，来确定当前的状态是选中或者取消
el-select 数据回显的是 value值，不是label值
原因：回显的数据类型与value值的数据类型不一致
解决办法：转换数据类型 Number()
:key="item.id"
:label="item.difficulty"
:value="item.id">
created () {
this.form.difficulty = Number(this.editShotDetail.difficulty)
}
警告
[Element Warn][TableColumn]Comparing to render-header, scoped-slot header is easier to use. We recommend users to use scoped-slot header.
解释：与render-header相比，scoped-slot更易于使用。建议使用scoped-slot
级联选择器 Cascader 获取级联对象
级联选择器 自定义显示内容
goodsOptions: [], // 为渲染数据
defaultData:{ //联级选择
value: 'id',
label: 'name',
children: 'class'
},
级联选择器(Cascader)出现空白选项的bug
element-ui日期的编辑和回显 -- yyyy-MM-dd格式
报错：Error in event handler for "el.form.change": "TypeError: value.getTime is not a function"
时间日期默认格式：
value-format="yyyy"
value-format="yyyy-MM-dd"
value-format="yyyy-MM-dd HH:mm:ss"
案例如下：
v-model="form.time_frame" value-format="yyyy-MM-dd HH:mm:ss" format="yyyy-MM-dd HH:mm:ss"
type="datetimerange"
start-placeholder="开始日期"
end-placeholder="结束日期"
:default-time="['10:00:00', '10:00:00']">
表单验证
axios 上传文件 post
elementUI 上传文件
elementUI 上传文件之后清空
树形控件 el-tree自定义props属性
:props="defaultProps"
@node-click="handleNodeClick"
:default-expanded-keys="expandId"
node-key="id"
accordion
ref="tree">
data () {
return: {
defaultProps: {
children: 'children',
label: function (a, b) {
return a.label+ ' ( ' + a.personNum + '人 )'
}
},
}
}
树形控件，获取点击的子节点的父节点
el-input 输入框
el-input 监听enter回车事件
el-input自动获取焦点
编辑
editClick () {
this.$nextTick(function () {
this.$refs.depName.$el.querySelector('input').focus();
});
},
el-input内容变化实时监听
局部区域 loading效果
element-loading-text="拼命加载中" element-loading-spinner="el-icon-loading">
.loading_color {
background: #a3a7d045;
}
.loading_color .el-loading-text,.loading_color .el-loading-spinner i {
color: #fff;
}
element-loading-text="拼命加载中" 设置loading文字
element-loading-background="rgba(0, 0, 0, 0.8)" 设置loading背景
element-loading-spinner="el-icon-loading" 设置loading图标
element-loading-custom-class="loading_color" 设置class名
https://segmentfault.com/q/1010000016532481
element UI upload组件上传附件格式限制
accept=".doc,.docx">
accept=".doc,.docx" // word文件
//accept支持上传文件格式
element-ui中upload组件如何传递文件及其他参数(beforeUpload事件上传)
element ui dialog 点击空白处怎么能不自动关闭
:close-on-click-modal="false"
element-ui引入index.css报错(No PostCSS Config found in:)
element-ui 表单清空验证
this.$refs.formRef.clearValidate(); //移除该表单项的校验结果
formRef 是表单el-form的ref值
表单清空验证报错：Cannot read property ‘clearValidate‘ of undefined“
原因：Dom 没有加载完成，导致获取不到refs元素
解决办法：
this.$nextTick(()=>{
this.$refs['addForm'].clearValidate();
})
@click 动态加点击事件
点击
data () {
return: {
index: 1
}
},
methods: {
func () {
console.log(index)
}
}
el-checkbox，文字跟复选框分开点击事件
{{city.version}}
点击复选框和点击p标签分开，@click.prevent 只执行点击事件，不会选中复选框
点击事件，阻止事件冒泡(点击子元素，不执行父元素事件)
22222
点击事件b，不会执行事件a
el-input 输入框 @click事件无效
解决方法：
加 .native 修饰符
@click.native="handleClick"
单个修改 elementUI 下拉样式(el-select)
popper-class="aaa"
.aaa .el-select-dropdown__item.selected {
color: red;
}
el-pagination 分页同样适用
时间日期选择器中默认显示时间
// 昨天的00:00:00 到 23:59:59
new Date(new Date().setHours(0, 0, 0, 0)-24*60*60*1000)
new Date(new Date().setHours(23, 59,59, 59)-24*60*60*1000)
el-form-item 通过slot自定义label内容
处理过程
表单验证的三种方式
1、表单上加 rules {}
2、el-form-item 单个添加 :rules=“[{require: true, message: '请输入内容'}]”
3、动态增减表单项
https://segmentfault.com/a/1190000020410128?utm_source=tag-newest
el-radio再次点击，取消选中
备选项
备选项
备选项
clickitem (e) {
e === this.radio2 ? this.radio2 = '' : this.radio2 = e
输入框清空时，页面刷新(@change)
1.直接在input里加上change事件，事件绑定页面刷新方法即可。
2.watch事件：(该事件与mounted事件并列)
watch: {
// 如果 `searchfilename` 发生改变，这个函数就会运行
searchfilename: function() {
if (this.searchfilename.length == 0) {
this.readData();
}
},
}
el-checkbox报错 Cannot read property 'length' of undefined
原因：层级太深 v-model=“form.value”
messageBox的$prompt 限制输入不能为空
editPassword (id) {
let that = this
this.$prompt('请输入密码', '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
inputType: 'password', // 输入框类型
inputErrorMessage: '输入不能为空',
inputValidator: (value) => { // 点击按钮时，对文本框里面的值进行验证
if(!value) {
return '输入不能为空';
}
}
}).then(({ value }) => {
that.$store.dispatch('savePassword', { // vuex调接口
id: id,
newPassword: value
})
}).catch(() => {
});
},
扫一扫
8672
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
