1. 要素 ui ダイアログは、フォーム検証が表示された場合にのみフォーム検証を実行します。
解決策: ポップアップ ウィンドウを閉じた後に this.$refs['form'].resetFields(); コマンドを実行する close イベントと open イベントを追加します。
getOpen() {
// 移除校验状态
this.$nextTick(() => {
this.$refs.form.clearValidate();
});ここでの 「フォーム」は フォームによって設定された ref の値です。このようにして、フォームが送信されるか閉じられるときにフォームを自動的にリセットできます。
2. 要素 ui ダイアログはフォーム検証に有効な値を取得できない可能性があるため、[OK] ボタンはフォーム検証を実行できません
解決策: 要素 ui ダイアログを別のコンポーネントとして使用できるようにします。
3. 文字列をシンボルごとに配列に分割したい
解決策: 文字列をカンマで区切って配列にするなど、split() を直接使用します。
4. 表にはスクロール バーが必要ですが、ページにはスクロール バーがありません
解決策: vh の視覚的な高さをフォームに設定します。
5. antv チャートを使用するのに十分なスキルがありません
解決策: 公式 Web サイトの 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 行キーが必要です
解決策: element-ui フォームは複数のオプションを選択するため、el-table に row-key="id" を追加する必要があります。
12. Vue.js フロント デスクがキャッチされない (約束された) キャンセル エラーの解決策を報告する
解決策: 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テーブルテーブルに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 の記述リストは主にデータを整列するために使用されます。