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()">
7. 表格多选值回显绑定 使用 toggleRowSelection 方法









<el-button
type="primary"
class="add_btn"
@click="addItem">添加

addItem () { // 添加按钮
this.dialogVisible = true;
if (this.tableData.length > 0 && this.tableData.length < this.checkNumber) {
this.$nextTick(() => {
this.$refs['regTable'].clearSelection();
})
for (let s of this.tableData) {
for (let k of this.popTableData) {
if (k.id == s.id) {
this.$nextTick(() => {
this.$refs['regTable'].toggleRowSelection(k, true)
})
}
}
}
}
},
//限制最多选择项 :selectable="selectAble"
handleSelectionChange(selection) {
this.tableDataCopy = selection;
console.log(selection);
for (let t in this.tableDataCopy) {
this.tableDataCopy[t].sort = t;
}
if (selection.length >= this.checkNumber) {
this.$message.warning(最多只能选${this.checkNumber}条！);
for (let j of this.popTableData) {
j.status = 0;
for (let i of selection) {
if (i.id == j.id) {
j.status = 1;
}
}
}
return
} else {
for (let i in this.popTableData) {
this.popTableData[i].status = 1;
}
}
},
selectAble (row) {
if (row.status == 1) {
return true;
}
return false;
},
8. 表格去掉全选按钮
:header-cell-class-name="cellClass"
cellClass(row) {
if (row.columnIndex === 0) {
return 'disabledCheck';
}
},
/* 深度选择器 去掉全选按钮 */
::v-deep .el-table .disabledCheck .cell .el-checkbox__inner {
display: none;
}