总结Vue|总结Vue Element UI使用中遇到的问题
目录
- 一、DateTimePicker 日期选择范围为当前时间以及当前时间之前
- 二、DateTimePicker 日期选择范围数组的拆分
- 三、el-select 选择器options的value/label采用拼接的方式
- 四、el-dialog 父子组件传值,关闭el-dialog时报错
- 五、el-form-item的label自定义
- 六、el-input 使用clearable清除内容时触发校验提示
一、DateTimePicker 日期选择范围为当前时间以及当前时间之前
还有一种情况就是,只能选取当前时间之后的时间,包括时分秒,若选择的时间小于当前时间,就会自动的填充成当前的时分秒。这时可以配合watch监听属性或事件来处理。
二、DateTimePicker 日期选择范围数组的拆分 项目中碰到的需求:type 为 daterange 的日期选择器所绑定的值 date 是一个数组,但是后端接收的参数开始日期和结束日期是分开的,回显时返回的数据也是分开的
创建 arrayUtil.js 文件
// arrayUtil.js/** * @description 安全的获取数组对应下标数据 * @param { Array } arr * @param { int } index */export const saveGet = (arr, index) => {if( arr & Array.isArray(arr)) {return arr[index]; } else {return undefined; }}
在 .vue 文件中引入并调用
// .vue 文件import { saveGet } from './utils/arrayUtil';export default {data() {return {date: [] // 日期范围}},// 计算得到传递给后端的参数(拆分日期范围数组)computed: {queryParams() {return {... ...fromDate: saveGet(this.form.date, 0),toDate: saveGet(this.form,date, 1),... ...}; }},}
回显的时候,后端返回的 fromDate 和 toDate 再拼成数组就可以了。
三、el-select 选择器options的value/label采用拼接的方式
{{ item.tableName }}{{ item.level }}
上述 v-model="info" 是从后端返回的选择用户 id,infoList 为所有用户的信息,label 拼接了 用户姓名 - 用户idNo,回显时要匹配过滤下然后再拼接显示就行了。
显示如下:
文章图片
四、el-dialog 父子组件传值,关闭el-dialog时报错 二次封装 el-dialog 时,关闭 dialog 出现如下错误
文章图片
具体代码如下:
// 父组件新 增 // 子组件
出现错误的原因是:子组件的关闭事件和父组件的关闭事件相冲突了,子组件的 props 属性要由父组件来控制,不能直接修改 visible 的值。此处的 sync 修饰符相当于 el-dialog 直接修改了父组件的值。所以把父组件和子组件的 .sync 去掉就可以了。
还有一种方法就是将 close 方法改成 before-close,具体代码如下:
// 父组件新 增 // 子组件
五、el-form-item的label自定义 要求在 form 表单的 label 中添加提示文字,具体显示要求如下图:
文章图片
api文档中form-item slot有个label属性,用来自定义标签文本的内容。实现如下:
用户名(支持字母、数字和特殊符号)
【总结Vue|总结Vue Element UI使用中遇到的问题】然后结合样式修改下字体和颜色就可以了
六、el-input 使用clearable清除内容时触发校验提示 form表单的el-input带有输入校验,触发方式trigger为blur,如果使用clearable清除内容时不会触发校验提示。文档中el-input提供了focus()方法,在清除内容的时候调用一下,在失去焦点时就会触发校验了。具体实现如下:
// 清除表单内容事件clearInput (refName) {this.$refs[refName].focus()}
以上就是总结Vue Element UI使用中遇到的问题的详细内容,更多关于Vue Element UI的资料请关注脚本之家其它相关文章!
推荐阅读
- vue-cli|vue-cli 3.x vue.config.js 配置
- 7.9号工作总结~司硕
- 2020-04-07vue中Axios的封装和API接口的管理
- 基于|基于 antd 风格的 element-table + pagination 的二次封装
- 最有效的时间管理工具(赢效率手册和总结笔记)
- 数据库总结语句
- 周总结|周总结 感悟
- 周总结43
- VueX--VUE核心插件
- 参加【21天写作挑战赛】,第七期第14天,挑战感受小总结