1. 程式人生 > >element-ui的時間選擇器的小坑

element-ui的時間選擇器的小坑

需要的做一個日期選擇框在已有頁面上

  • 第一個問題:頁面上已經存在了很多層級,但是我們需要顯示在最上面,需要加一個類名把層級設定為最大,這個時候的需要用的屬性“popper-class”。由於之前很多屬性類似於“key”這種,都是需要v-bind:或“:”的所以,最後找了一會發現,這個屬性直接就可以,不需要v-bind:或者“:”。直接使用即可。
  • 第二個問題就是,上面彈出框的圖示的關閉事件。因為採用的彈出框。所以需要用到的是@close方法來做關閉事件。所以部分程式碼如下:
  • html程式碼:
<el-dialog :title="表格" :visible.sync="holidayFormVisible" width="40%" center custom-class="resonDialog" @close="cancelholiday">
			<el-form :model="form" ref="form" label-width="100px">
				<el-form-item label="管控日期">
					<el-date-picker type="dates" v-model="form.value14" popper-class="hx-h11" format="yyyy-MM-dd" value-format="yyyy-MM-dd" placeholder="選擇假期">
					</el-date-picker>
				</el-form-item>
			</el-form>
			<div slot="footer" class="dialog-footer">
				<el-button @click="cancelholiday">{{$t('common.cancel')}}</el-button>
				<el-button type="primary" @click="holidayConfirm('form')">{{$t('common.confirm')}}</el-button>
			</div>
		</el-dialog>

css程式碼:

.hx-h11 {
    z-index: 9999 !important;
    top: 188px !important;
}

js程式碼:

holidayFormVisible: false,

//關閉方法
cancelholiday: function() {
            this.holidayFormVisible = false;
            this.form = {
                value14: []
            };
        },