1. 요소 UI 대화 상자는 양식 확인이 표시된 후에만 양식 확인을 수행합니다.
해결 방법: 팝업 창을 닫은 후 this.$refs['form'].resetFields(); 명령을 실행하려면 닫기 이벤트와 열기 이벤트를 추가하십시오.
getOpen() {
// 移除校验状态
this.$nextTick(() => {
this.$refs.form.clearValidate();
});여기서 'form'은 form에 의해 설정된 ref의 값으로, form이 submit되거나 닫힐 때 form이 자동으로 reset 될 수 있습니다.
2. 요소 UI 대화 상자는 양식 확인을 위한 유효한 값을 얻지 못할 수 있으므로 확인 버튼은 양식 확인을 수행할 수 없습니다.
해결 방법: 요소 UI 대화 상자를 별도의 구성 요소로 전환하여 사용
3. 문자열은 기호에 의해 배열로 분할되길 원합니다.
해결 방법: 다음과 같이 split()을 직접 사용하십시오. 문자열을 쉼표로 배열로 분리 split(",")
4. 테이블에 스크롤 막대가 있어야 하는데 페이지에 스크롤 막대가 없습니다.
솔루션: vh 시각적 높이를 테이블에 설정
5. antv 차트를 사용하기에 충분히 숙련되지 않았습니다.
해결책: 공식 웹사이트에서 API 설명서를 주의 깊게 읽으십시오.
6. 배열에서 지정된 요소를 찾는 여러 가지 방법
7. 데이터 수정을 위한 입력 양식이 가끔 새로 고쳐지지 않는 경우가 있습니다.
해결책: 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 오류：[ElTable] prop row-key가 필요합니다.
해결 방법: element-ui 형식은 여러 옵션을 선택하며 el-table에 row-key="id"를 추가해야 합니다.
12. Vue.js 프런트 데스크에서 Uncaught(약속 중) 취소 오류 솔루션 보고
해결 방법: this.$confirm 메서드에는 약속 메서드가 내장되어 있으므로 .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 테이블 테이블에 행이 2개 이상일 때만 프롬프트 상자가 나타나는 문제 해결
//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. 객체의 키 값을 다른 배열 객체로 사용하는 경우
개체 이름[OtherArrayObject.Value]
16. element-ui의 설명 목록은 주로 일부 데이터를 정렬하는 데 사용됩니다.