vue使用element-ui,vue引入elementui报错
本文主要介绍使用Vue ElementUI遇到的问题。对Element UI感兴趣的同学可以参考一下。
:
目录
1.DateTimePicker日期选择范围是当前时间和当前时间之前。2.DateTimePicker日期选择范围数组的拆分。3.el-select选择器选项的值/标签被拼接。4.el-dialog的父子组件传输值。关闭el对话框时出错。5.el表单项目的标签定制。6.在el-input中使用Clear清除内容时触发验证提示。基于vue2.0的element-ui框架，使用起来非常方便，非常适合快速开发。但是我自己的项目还是存在一些问题，一些官方文档也不是很详细。以下是我在使用element-ui时遇到的一些常见问题或问题的一些笔记。
一、DateTimePicker 日期选择范围为当前时间以及当前时间之前
模板
差异
El-日期选择器
size=小
可清除的
:picker-options=pickerOptions
v-model=dateRange
type=daterange
值格式=yyyy-MM-dd
范围分隔符=到
Start-placeholder=开始日期
End-placeholder=结束日期/el-date-picker
/div
/模板
脚本
导出默认值{
data () {
返回{
建议：{
禁用日期(时间){
return time.getTime() Date.now()
}
},
日期范围：[]
}
}
}
/脚本
在另一种情况下，您只能选择当前时间之后的时间，包括分钟和秒。如果所选时间小于当前时间，它将自动填入当前分钟和秒。这时可以用watch来处理，监听属性或者事件。
模板
差异
El-date-picker size= small clearable type= date range v-model= date range
:picker-options=pickerOptions
值格式=yyyy-MM-dd
范围分隔符=到
Start-placeholder=开始日期
End-placeholder=结束日期/el-date-picker
/div
/模板
脚本
导出默认值{
data () {
返回{
建议：{
禁用日期(时间){
return time . gettime()date . now()-1 * 24 * 3600 * 1000
}
},
日期范围：[]
}
},
观察：{
date(val){//在这里，您也可以用change事件替换它
var st=新日期(val) * 1000/1000
if (st Date.now()) {
this.dateRange=新日期()
}
}
}
}
/脚本
二、DateTimePicker 日期选择范围数组的拆分
项目中遇到的要求：daterange类型的日期选择器绑定的值日是数组，但是后端收到的参数的开始日期和结束日期是分开的，回显时返回的数据也是分开的。
创建arrayUtil.js文件
//arrayUtil.js
/**
* @description安全获取数组对应的下标数据
* @param { Array } arr
* @param { int } index
*/
export const saveGet=(arr，index)={
if( arr Array.isArray(arr)) {
return arr[index]；
}否则{
返回未定义的；
}
}
介绍并召集。vue文件
//.vue文件
从导入{ saveGet }。/utils/array util ；
El-日期选择器
type=daterange
v-model=date
值格式=yyyy-mm-dd
format=yyyy-mm-dd
Start-placeholder=开始日期
End-placeholder=结束日期
style= width:100%；/El-日期选择器
导出默认值{
data() {
返回{
日期：[] //日期范围
}
},
//计算传递给后端的参数(拆分日期范围数组)
计算值：{
queryParams() {
返回{
.
from date:save get(this . form . date，0)，
toDate: saveGet(this.form，Date，1)，
.
};
}
},
}
回显的时候，后端返回的开始日期和今天再拼成数组就可以了。
三、el-select 选择器options的value/label采用拼接的方式
El-选择占位符=请选择style=宽度：100% 可过滤v-model=信息可清除
埃尔选项
v-for=信息列表中的项目
:key=info.id
:label= ` name:$ { item。姓名}-身份证号码：$ {项目。idNo } `
:value=item.id
span style= float:left"{ item。tablename } }/span
span style= float:right；颜色：# 8492a6font-size:13px"{ item。级别} }/span
/el选项
/el-select
上述v-model=信息是从后端返回的选择用户id，信息列表为所有用户的信息，标签拼接了用户姓名-用户idNo，回显时要匹配过滤下然后再拼接显示就行了。
显示如下：
四、el-dialog 父子组件传值，关闭el-dialog时报错
二次封装埃尔对话时，关闭对话出现如下错误
具体代码如下：
//父组件
El-button type= primary size= mini @ click= dialog visible=true 新增/el-button
com-dialog:对话框可见。sync=对话框可见 @ close dialog=关闭对话框/com-dialog
//子组件
模板
el-dialog title=新增：可见。sync=对话框可见 @ close=关闭对话框
/模板
脚本
导出默认值{
道具：{
对话框可见：{
类型：布尔型，
默认值：错误
}
},
方法：{
//关闭对话
closeDialog(){
这个. emit(update:closeDialog ，false)；
}
},
};
/脚本
出现错误的原因是：子组件的关闭事件和父组件的关闭事件相冲突了，子组件的小道具属性要由父组件来控制，不能直接修改看得见的的值。此处的同步修饰符相当于埃尔对话直接修改了父组件的值。所以把父组件和子组件的。同步去掉就可以了。
还有一种方法就是将关闭方法改成关闭前，具体代码如下：
//父组件
El-button type= primary size= mini @ click= dialog visible=true 新增/el-button
com-dialog:对话框可见。sync=对话框可见 @ close dialog=关闭对话框/com-dialog
//子组件
模板
el-dialog title=新增：可见。sync=“对话框可见”:before-close=“关闭对话框”
/模板
脚本
导出默认值{
道具：{
对话框可见：{
类型：布尔型，
默认值：错误
}
},
方法：{
//关闭对话
closeDialog(){
这个. emit(closeDialog ，false)；
}
},
};
/脚本
五、el-form-item的label自定义
要求在形式表单的标签中添加提示文字，具体显示要求如下图：
美国石油学会(美国石油协会)文档中表单项目槽有个标签属性，用来自定义标签文本的内容。实现如下：
el-form-item prop=name
span slot=label
用户名我（支持字母、数字和特殊符号)/我
/span
埃尔输入v-model=name/el输入
/El-表单-项目
然后结合样式修改下字体和颜色就可以了
六、el-input 使用clearable清除内容时触发校验提示
形式表单的埃尔输入带有输入校验，触发方式引发为模糊，如果使用可清除的清除内容时不会触发校验提示。文档中埃尔输入提供了焦点()方法，在清除内容的时候调用一下，在失去焦点时就会触发校验了。具体实现如下：
埃尔-输入占位符=请输入v-model=形式。name clearable ref= name ref @ clear= clear input( name ref )/El-input
//清除表单内容事件
clearInput (refName) {
这个参考文献[参考名称].焦点()
}
以上就是总结某视频剪辑软件元素用户界面使用中遇到的问题的详细内容，更多关于某视频剪辑软件元素用户界面的资料请关注我们其它相关文章！
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。