Vue Element UIの使用時に遭遇した問題をまとめる

<テンプレート>
    <div>
        <el-日付ピッカー
            サイズ="小"
            クリア可能
            :picker-options="ピッカーオプション"
            v-model="日付範囲"
            タイプ="日付範囲"
            値の形式="yyyy-MM-dd"
            範囲区切り文字="to"
            start-placeholder="開始日"
            end-placeholder="終了日"></el-date-picker>
    </div>
</テンプレート>

<スクリプト>
    エクスポートデフォルト{
        データ （） {
            戻る {
                ピッカーオプション: {
                    無効日付 (時刻) {
                        time.getTime() > Date.now() を返す
                    }
                },
                日付範囲: []
            }
        }
    }
</スクリプト>

<テンプレート>
    <div>
        <el-date-picker size="small" clearable type="daterange" v-model="dateRange"
            :picker-options="ピッカーオプション"
            値の形式="yyyy-MM-dd"
            範囲区切り文字="to"
            start-placeholder="開始日"
            end-placeholder="終了日"></el-date-picker>
    </div>
</テンプレート>

<スクリプト>
    エクスポートデフォルト{
        データ （） {
            戻る {
                ピッカーオプション: {
                    無効日付 (時刻) {
                        time.getTime() を返す < Date.now() - 1 * 24 * 3600 * 1000
                    }
                },
                日付範囲: []
            }
        },
        時計：
            dateRange (val) { //これは変更イベントに置き換えることもできます var st = new Date(val) * 1000 / 1000
                st < Date.now() の場合 {
                    this.dateRange = 新しい日付()
                }
            }
        }
    }
</スクリプト>

// 配列Util.js
/**
 * @description 配列に対応するインデックスデータを安全に取得します* @param { Array } arr
 * @param { int } インデックス
 */
エクスポートconst saveGet = (arr, index) => {
    Array.isArray(arr) の場合
        arr[インデックス]を返します。
    } それ以外 {
        未定義を返します。
    }
}

// .vue ファイルをインポート { saveGet } './utils/arrayUtil' から;

<el-日付ピッカー 
    タイプ="日付範囲" 
    v-model="日付" 
    値の形式="yyyy-mm-dd" 
    フォーマット="yyyy-mm-dd" 
    start-placeholder="開始日" 
    end-placeholder="終了日" 
    style="width: 100%;"></el-date-picker>

エクスポートデフォルト{
    データ（） {
        戻る {
            date: [] // 日付範囲}
    },
    // バックエンドに渡されるパラメータを計算する（日付範囲配列を分割）
    計算: {
        クエリパラメータ() {
            戻る {
                ……
                fromDate: saveGet(this.form.date, 0)、
                toDate: saveGet(this.form,date, 1),
                ……
            };
        }
    },
}

<el-select placeholder="選択してください" style="width:100%" filterable v-model="info" clearable >
    <el-オプション
      v-for="infoList 内の項目"
      :key="info.id"
      :label="`名前: ${item.name} - idNo: ${item.idNo}`"
      :value="アイテムID">
      <span style="float: left">{{ item.tableName }}</span>
      {{ アイテム.レベル }}
    </el-option>
</el-select>

// 親コンポーネント <el-button type="primary" size="mini" @click="dialogVisible=true">追加</el-button>
<com-dialog :dialogVisible.sync="dialogVisible" @closeDialog="closeDialog"></com-dialog>

// サブコンポーネント <テンプレート>
    <el-dialog title="新規" :visible.sync="dialogVisible" @close="ダイアログを閉じる">
</テンプレート>

<スクリプト>
エクスポートデフォルト{
  小道具: {
      ダイアログ表示: {
          タイプ: ブール値、
          デフォルト: false
      }
  },
  方法:{
      //ダイアログを閉じる
      ダイアログを閉じる(){
        this.$emit('update:closeDialog', false);
      }
  },
};
</スクリプト>

// 親コンポーネント <el-button type="primary" size="mini" @click="dialogVisible=true">追加</el-button>
<com-dialog :dialogVisible.sync="dialogVisible" @closeDialog="closeDialog"></com-dialog>

// サブコンポーネント <テンプレート>
    <el-dialog title="新規" :visible.sync="dialogVisible" :before-close="ダイアログを閉じる">
</テンプレート>

<スクリプト>
エクスポートデフォルト{
  小道具: {
      ダイアログ表示: {
          タイプ: ブール値、
          デフォルト: false
      }
  },
  方法:{
      //ダイアログを閉じる
      ダイアログを閉じる(){
        this.$emit('closeDialog', false);
      }
  },
};
</スクリプト>

<el-form-item プロパティ="名前">
    <span スロット="ラベル">
        ユーザー名<i>(アルファベット、数字、特殊文字がサポートされています)</i>
    </span>
    <el-input v-model="名前"></el-input>
</el-form-item>

<el-input placeholder="入力してください" v-model="form.name" clearable ref="nameRef" @clear="clearInput('nameRef')"></el-input>
                             
// フォームの内容をクリアするイベント clearInput (refName) {
    this.$refs[refName].focus()
}