1. Element ui dialog will perform form verification only once form verification will appear
Solution: Add close event and open event to execute this.$refs['form'].resetFields(); command after closing the popup window
getOpen() {
// 移除校验状态
this.$nextTick(() => {
this.$refs.form.clearValidate();
});The 'form' here is the value of the ref set by the form. In this way, the form can be automatically reset when the form is submitted or closed.
2. The element ui dialog may not get the valid value for form verification, so the OK button cannot perform form verification
Solution: Turn element ui dialog into a separate component for use
3. Strings want to be split into arrays by symbols
Solution: Use split() directly, such as: separate strings into arrays by commas split(",")
4. The table needs to have a scroll bar, but the page does not have a scroll bar
Solution: set vh visual height to the form
5. Not skilled enough to use antv charts
Solution: Carefully read the api documentation on the official website
6. Several ways to find specified elements in an array
7. The input form for data modification sometimes does not refresh
Solution: this.$forceUpdate()
8. The elementUI tree structure Tree modifies the height of each row
solution:
.el-tree-node__content {
height: 40px;
}9. modify the height of elementUI input box
solution:
.el-input__inner {
height: 30px;
margin-bottom: 5px;
}10. To modify the component style, use the depth selector
Depth selector::v-deep is more general
11.Vue Error：[ElTable] prop row-key is required
Solution: The element-ui form selects multiple options, and you need to add: row-key="id" to the el-table
12. Vue.js front desk reports Uncaught (in promise) cancel error solution
Solution: the this.$confirm method has a built-in promise method, so .catch() cannot be removed (because it cannot be caught when canceling the operation)
13. After the el-input input box uses oninput or onkeyup, the v-model two-way binding fails.
<el-input
v-model="form.currentPayAmount"
@blur="form.currentPayAmount = $event.target.value"
@input="input($event)"
>
</el-input>
14. Solve the problem that the prompt box appears only when there are two or more rows in the element-ui table 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. When using the key value of the object as other array object
ObjectName[OtherArrayObject.Value]
16. The description list of element-ui is mainly used to align some data.