Element-UIの10の驚くべきトリックのまとめ

<el-スクロールバー>
  <div class="box">
    <p v-for="item in 15" :key="item">el-scrollbar {{item} の使用を歓迎します</p>
  </div>
</el-スクロールバー>

<スタイルスコープ>
.el-スクロールバー{
  境界線: 1px 実線 #ddd;
  高さ: 200px;
}
.el-scrollbar :: v-deep .el-scrollbar__wrap {
    overflow-y: スクロール;
    オーバーフロー-x:非表示;
  }
</スタイル>

<button @click="handleUpload">ファイルをアップロード</button>
<el-アップロード
  v-show="false"
  クラス="アップロードリソース"
  複数
  アクション=""
  :http-request="クリックアップロードファイル"
  ref="アップロード"
  :on-success="アップロード成功"
>
    ローカルファイルをアップロード</el-upload>

<スクリプト>
エクスポートデフォルト{
    メソッド: {
        //クリックをシミュレートする handleUpload() {
            document.querySelector(".upload-resource.el-upload").click()
        },
        // ファイルをアップロードする async clickUploadFile(file) {
            const フォームデータ = 新しいフォームデータ()
            formData.append('ファイル', ファイル.ファイル)
            const res = api.post(`xxx`, formData) を待機します
        }
        // アップロードが成功したら、コンポーネントの組み込みファイルリストをクリアします uploadSuccess() {
            this.$refs.upload.clearFiles()
        }
    }
}
</スクリプト>

<el-select popper-class="popper-class" :popper-append-to-body="false" v-model="value" placeholder="選択してください">
    <el-オプション
      v-for="オプション内の項目"
      :key="アイテム.値"
      :label="アイテム.ラベル"
      :value="アイテムの値"
    >
        <el-ツールチップ
          配置="上"
          :disabled="item.label.length<17"
        >
            <div スロット="コンテンツ">
                <span>{{item.label}}</span>
            </div>
            <div class="iclass-text-ellipsis">{{ item.label }}</div>
        </el-tooltip>
    </el-option>
</el-select>

<スクリプト>
  エクスポートデフォルト{
    データ（） {
      戻る {
        オプション: [{
          値: 'オプション 1'、
          ラベル: 「ゴールデンケーキ、ゴールデンケーキ、ゴールデンケーキ、ゴールデンケーキ、ゴールデンケーキ、ゴールデンケーキ、ゴールデンケーキ、ゴールデンケーキ、ゴールデンケーキ」
        }, {
          値: 'オプション 2'、
          ラベル: 「ダブルスキンミルク、ダブルスキンミルク、ダブルスキンミルク、ダブルスキンミルク、ダブルスキンミルク、ダブルスキンミルク、ダブルスキンミルク、ダブルスキンミルク」
        }, {
          値: 'オプション 3'、
          ラベル: 「牡蠣オムレツ牡蠣オムレツ牡蠣オムレツ牡蠣オムレツ牡蠣オムレツ牡蠣オムレツ牡蠣オムレツ」
        }],
        価値： ''
      }
    }
  }
</スクリプト>

<スタイルスコープ>
.el-select {
  幅: 300ピクセル;
}
.el-select ::v-deep .popper-class {
  幅: 300ピクセル;
}
.iclass-テキスト省略記号 {
  空白: ラップなし;
  オーバーフロー: 非表示;
  テキストオーバーフロー: 省略記号;
}
</スタイル>

<el-form :rules="ルール" :model="フォーム" label-width="80px">
    <el-form-item label="アクティビティ名" prop="名前">
        <el-input v-model="フォーム名"></el-input>
    </el-form-item>
</el-form>

<スクリプト>
エクスポートデフォルト{
    データ（） {
        戻る {
            形状： {
                名前： ''
            },
            ルール:
                名前： [
                        { 必須: true、メッセージ: 'アクティビティ名を入力してください'、トリガー: 'blur'}、
                        { パターン: /^(?!\s+).*(?<!\s)$/、メッセージ: '最初と最後のスペースは使用できません'、トリガー: 'blur' }
                ]
            }
        }
    }
}
</スクリプト>

<スタイルスコープ>
::v-deep .el-input__inner {
    行の高さ: 1px !重要;
}
</スタイル>

<el-input class="clear-number-input" type="number"></el-input>

<スタイルスコープ>
.clear-number-input ::v-deep input[type="number"]::-webkit-outer-spin-button,
.clear-number-input ::v-deep input[type="number"]::-webkit-inner-spin-button {
    -webkit-appearance: なし !important;
}
</スタイル>

this.$refs.form.validateField('name', 有効 => {
    （有効）の場合{ 
        console.log('送信!'); 
    } それ以外 { 
        console.log('エラー送信!'); 
        false を返します。 
    }
})

<el-dialog @closed="フォームをリセット">
    <el-form ref="フォーム">
    </el-form>
</el-ダイアログ>

<スクリプト>
エクスポートデフォルト{
    メソッド: {
        リセットフォーム() {
            this.$refs.form.resetFields()
        }
    }
}
</スクリプト>

<el-dialog :visible.sync="visible" v-if="visible" 閉じると破棄されます>
</el-ダイアログ>

<el-テーブル列
  prop="アドレス"
  label="住所"
  幅= "180"
  オーバーフローツールチップを表示
>
</el-table-column>