踩坑记录--vue2.0+elementUI开发遇到的问题
改为下面的代码就正常了错误原因是webpack打包逻辑,webpack4中动态import不支持变量方式,查看路由返回的信息,只是返回一个方法。原来是用import导入的: // 静态路由懒加载 export const loadView = (view) => { return () => import() }改为require引入方式::export const loadView = (vie
1.标题vue由静态路由改为动态路由时,出现错误Cannot find module xxx
// 静态路由懒加载
export const loadView = (view: any) => {
return () => import(`@/views/${view}.vue`)
}
改为下面的代码就正常了
export const loadView = (view) => {
return (resolve) => require([`@/views/${view}.vue`], resolve)
}
错误原因是webpack打包逻辑,webpack4中动态import不支持变量方式,查看路由返回的信息,只是返回一个方法。
原来是用import导入的 : // 静态路由懒加载 export const loadView = (view) => { return () => import(@/views/${view}.vue
) }
改为require引入方式::export const loadView = (view) => { return (resolve:) => require([@/views/${view}.vue
], resolve) }
2.element ui 重置表单后无法输入的问题
使用:this.$refs[formName].resetFields();
结果:重置表单后,部分输入框无法输入文字
解决方法:给所有表单项默认给一个空值
filterForm:{
name:'',
address:''
}
3.element-ui DatePicker 日期选择框无法修改日期
可能是value-fomat的值给错了,比如年月日的日,是dd小写,而不是大写DD
4.vue导出或下载表格,提示文件格式和拓展名不匹配
我本次遇到的问题,原因是请求未设置以下内容:
responseType:'blob'
设置完之后就正常了,完整代码:
this.$axios.get('/XX/XX',{
params: params,
responseType: 'blob' //首先设置responseType字段格式为 blob
}).then(res => {
console.log(res);
let blob = new Blob([res], {type: "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet;charset=UTF-8"}); // 为blob设置文件类型,这里以.xlsx为例
let url = window.URL.createObjectURL(blob); // 创建一个临时的url指向blob对象
let a = document.createElement("a");
a.href = url;
a.click();
// 释放这个临时的对象url
window.URL.revokeObjectURL(url);
});
5.日期组件当type=“datetime“ 报错 mask.replace is not a function
好家伙,这个居然是因为我在vue上挂载了全局方法dateFormat,原来element 计算属性里也有这个dateFormat,于是我把全局方法的名字修改一下就好了。
6.关于Element UI中date-picker在IE11浏览器中设置的值无法显示
添加value-format参数来绑定值的格式即可:
value-format="yyyy-MM-dd hh:mm:ss"
如果仍然想给后台传递date对象格式的数据,在提交的时候重新new Date(‘date-picker的值’)一下就行了。
7.vue路由无论怎么跳转都只能显示首页的内容
因为这个账号没有菜单权限!!菜单是通过接口获取的数据生成的动态路由,因为没有权限,所有压根就没有生成动态路由,自然就怎么也跳转不过去了。
8.vue的router组件component在import时不能使用变量
webpack 编译es6 动态引入 import() 时不能传入变量,例如dir =’path/to/my/file.js’ ; import(dir) , 而要传入字符串 import(‘path/to/my/file.js’),这是因为webpack的现在的实现方式不能实现完全动态。
但一定要用变量的时候,可以通过字符串模板来提供部分信息给webpack;例如import(./path/${myFile}), 这样编译时会编译所有./path下的模块,但运行时确定myFile的值才会加载,从而实现懒加载。
9.elementui中的表单自动校验问题
表单加载成功时,会自动执行rules校验,解决这个问题,一般都选择直接把出发方式改成blur,但是,我这样修改后,依然不好用,问题可能出现在我根据业务需要,修改了校验规则,也就是说rules发生了改变,这时需要添加官网说明的属性
:validate-on-rule-change=false
<!--是否在 rules 属性改变后立即触发一次验证-->
将其设置为false,即可。
10.添加或删除成员时vue对象无法实时更新的解决方案
可以在实例中使用 s e t 和 set和 set和delete,也可以直接调用Vue的设置和删除。
this.$set(this.user,'name','张三')
this.$delete(this.age,' age ')
let vm=new Vue({ el : '#app ',
data : {
user:{}
}
})
Vue.set(vm.user,'name','张三')
Vue.delete(vm.user,'name')
11.vue-cli-service启动本地服务,指定文件
"serve": "vue-cli-service serve",
"serve2": "vue-cli-service serve ./src/main2.js",
上面是默认配置,指向main.js,下面是按自己需要指定启动入口文件。
更多推荐
所有评论(0)