1.element ui dialog进行表单的验证会出现只进行一次表单校验
解决方案:添加close事件和open事件在关闭弹窗之后执行this.$refs['form'].resetFields();命令
getOpen() {
// 移除校验状态
this.$nextTick(() => {
this.$refs.form.clearValidate();
});
这里面的 ‘form’ 就是表单设置的ref的值,通过这种方法,就能在提交表单、关闭表单的时候自动重置表单
2.element ui dialog进行表单的验证可能会得不到valid值导致确定按钮无法进行表单校验
解决方案:将element ui dialog变成单独组件进行使用
3.字符串想通过符号进行分割成数组
解决方案:直接使用split(),如:通过逗号分隔字符串成数组split(",")
4.需要表格有滚动条,页面没滚动条
解决方案:给表格设置vh视觉高度
5.对于antv图表使用不够熟练
解决方案:对官网api文档仔细阅读
6.数组查找指定元素的几种方法
7.input表单进行数据修改有时候不刷新
解决方案:this.$forceUpdate()
8.elementUI树结构Tree修改每行高度
解决方案:
.el-tree-node__content {
height: 40px;
}
9.elementUI输入框修改高度
解决方案:
.el-input__inner {
height: 30px;
margin-bottom: 5px;
}
10.修改组件样式要用深度选择器
深度选择器::v-deep比较通用
11.Vue Error:[ElTable] prop row-key is required
解决方案:element-ui表单选择了多选,需要在el-table上添加:row-key=“id”
12.Vue.js前台报Uncaught (in promise) cancel错误解决办法
解决方案:this.$confirm方法内置promise方法, 所以不能把.catch()去掉(因为取消操作时,无法捕获)
13.解决el-input输入框使用oninput或onkeyup后,v-model双向绑定失效问题
<el-input
v-model="form.currentPayAmount"
@blur="form.currentPayAmount = $event.target.value"
@input="input($event)"
>
</el-input>
14.解决element-ui table表格两行或者更多行才出现提示框的问题
//html
<el-tooltip
placement="top"
v-model="scope.row.showTooltip"
v-if="scope.row.schedulePoints[0].moduleName != ''"
:open-delay="500"
effect="dark"
>
<div slot="content">
[{
{ scope.row.schedulePoints[1].moduleName }}]-[{
{
scope.row.schedulePoints[1].className
}}{
{ scope.row.schedulePoints[1].classNumber }}]
</div>
<div
@mouseenter="showTips($event, scope.row, scope.$index)"
class="curse"
v-if="scope.row.schedulePoints[1].moduleName != ''"
>
[{
{ scope.row.schedulePoints[1].moduleName }}]-[{
{
scope.row.schedulePoints[1].className
}}{
{ scope.row.schedulePoints[1].classNumber }}]
</div>
</el-tooltip>
//js
showTips(obj, row, index) {
/*obj为鼠标移入时的事件对象*/
/*currentWidth 为文本在页面中所占的宽度,创建标签,加入到页面,获取currentWidth ,最后在移除*/
let TemporaryTag = document.createElement("span");
TemporaryTag.innerText = `[ ${row.schedulePoints[0].moduleName} ]-[${row.schedulePoints[0].className}${row.schedulePoints[0].classNumber} ]`;
TemporaryTag.className = "getTextWidth";
document.querySelector("body").appendChild(TemporaryTag);
let currentWidth = document.querySelector(".getTextWidth").offsetWidth;
document.querySelector(".getTextWidth").remove();
/*cellWidth为表格容器的宽度*/
const cellWidth = obj.target.offsetWidth;
console.log("currentWidth" + currentWidth);
console.log("cellWidth" + cellWidth);
/*当文本宽度小于||等于容器宽度两倍时,代表文本显示未超过两行*/
if (currentWidth >= 2 * cellWidth) {
row.showTooltip = true;
} else {
row.showTooltip = false;
}
},
//css
.curse {
width: 100%;
text-align: left;
font-size: 16px;
color: #1c2438;
font-weight: 500;
display: -webkit-box;
text-overflow: ellipsis;
overflow: hidden;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
}
15.在使用对象的键值为其他数组对象时
对象名[其他数组对象.值]
16.element-ui的描述列表的使用主要用来对齐一些数据。