element 使用问题总结

1 表格请求数据时，先出现 ''暂无数据'' 之后在进行加载数据，用户体验不好
解决：

data() {
return {
tableData: [],
dataText: ""
};
},

//请求数据
getList(data) {
this.dataText = "";
wuliuList(data).then(res => {
this.tableTotal = res.data.data.total_count;
this.tableData = res.data.data.list;
if (this.tableData.length === 0) {
this.dataText = "暂无数据";
}
});
}
2 element-ui 表单验证 使用v-if 切换表单项校验错位/不生效问题
1 给每个 el-form-item 绑定唯一 key 值
2 使用v-show代替 v-if
3 element-ui 重复点击按钮或多个请求同时报错时弹出多个message弹框解决方法
重写 resetMessage.js
import { Message } from 'element-ui';
export default {
message() {
let messageInstance = null;
const resetMessage = (options) => {
if(messageInstance) {
messageInstance.close()
}
messageInstance = Message(options)
};
['error','success','info','warning'].forEach(type => {
resetMessage[type] = options => {
if(typeof options === 'string') {
options = {
message:options
}
}
options.type = type
return resetMessage(options)
}
})
return resetMessage
}
}
main.js 中引入重写的 resetMessage.js
import resetMessage from '@/utils/resetMessage'
Vue.prototype.$message =resetMessage.message()
4 vue 中使用element-ui的menu 跳转路由为非菜单选项时无法关联选中高亮的问题
default-active匹配的是index值，当将el-menu的router属性设置为true时，跳转的路由如果没有设置route，则使用的是index的值，如果写了route，则路由使用的是route的值，因此在router.js里设置路由时，给相同导航高亮的路由设置相同的name属性即可。
在menu组件上设置default-active的值为：$route.name，这样就可以实现刷新时导航栏选中当前页的问题。最后设置el-menu-item的index属性为router.js文件里跳转路由的name值，route属性为：路由的path
原文：https://www.cnblogs.com/liuqin-always/p/11603708.html
5. form 表单使用 v-if 切换验证条件错位/不显示问题/嵌套太深导致清空验证失效
解决：1、绑定 key值 2 this.$nextTick(() => { this.$refs["starEditForm"].resetFields();}); 3 弹窗关闭回显验证失效，需自定义清除this.$nextTick(() => { this.$refs["starEditForm"].clearValidate([ "topicName", ]); });
6. el-select 嵌套太深，导致切换失败问题。
解决：<el-select v-model="starEditForm.page" @change="$forceUpdate()">