Element-ui使用遇到的问题总结

element官方文档基于vue2.0的element-ui框架，使用非常方便，非常适合快速开发，但是还是会遇到这个在你自己的项目中对于这样的问题，有些问题的官方文档不是很详细。以下是我在使用element-ui过程中遇到的一些常见问题或问题的一些笔记。element-ui中el-table的使用请点这里1.DateTimePicker日期选择范围为当前时间和当前时间之前另一种情况是只能选择当前时间之后的时间，包括时分秒。如果选择的时间小于当前时间，则自动补上当前时分秒。这时候可以用watch监控属性或者事件进行处理。二、DateTimePicker日期选择selectingrange数组拆分项目遇到的需求：类型为daterange的日期选择器绑定的valuedate是一个数组，但是后端接收的startdate和enddate参数是分开的，echoing时返回的数据同样单独创建arrayUtil.js文件//arrayUtil.js/***@description安全获取数组对应的下标数据*@param{Array}arr*@param{int}index*/exportconstsaveGet=(arr,index)=>{if(arr&Array.isArray(arr)){returnarr[index];}else{返回未定义；}}.vue文件中引入调用//.vue文件import{saveGet}from'./utils/arrayUtil';exportdefault{data(){return{date:[]//日期范围}},//计算传递给后端（拆分日期范围数组）的参数已计算：{queryParams(){return{fromDate:saveGet(this.form.date,0),toDate:saveGet(this.form,date,1),......};}},}回显时，可以将后端返回的fromDate和toDate组装成一个数组3.el-select选择器选项的值/标签拼接{{项目。tableName}}{{item.level}}上面的v-model="info"是后台返回的选中用户id，infoList是所有用户的信息，label是与用户名-useridNo拼接，回显时匹配过滤即可，然后拼接显示。显示如下：4.el-dialog父子组件传值，关闭el-dialog报错。第二次封装el-dialog时，关闭dialog时出现如下错误。具体代码如下：//父组件添加//子组件错误原因是：子组件的关闭事件和父组件的关闭事件冲突，子组件的props属性必须由父组件控制，visible的值不能直接修改。这里的sync修饰符相当于el-dialog直接修改父组件的值。所以只要去掉父组件和子组件的.sync即可。另一种方式是将close方法改为before-close，具体代码如下：//父组件添加//子组件五、el-form-item的标签自定义需要在form表单的标签中添加提示文字。具体显示要求如下：api文档中的form-item槽有一个label属性，用于自定义标签文本的内容。实现如下：用户名（支持字母、数字和特殊符号）然后结合样式修改字体和颜色。6.el-input清空内容时触发验证提示表单el使用clearable-input有输入验证，触发方式为blur。如果使用clearable清除内容，则不会触发验证提示。文档中el-input提供了focus()方法，在内容清空时调用，失去焦点时会触发校验。具体实现如下：//ClearFormcontenteventclearInput(refName){this.$refs[refName].focus()}以上，会继续更新:)~~