element-ui的DateTimePicker組件為我們提供了 文本框可輸入屬性 editable=“false/true”，但是此屬性只對外框有作用，內(nèi)框還是能手動輸入
但是需求需要我們外框內(nèi)框都不允許輸入只能選擇，就需要我們自己寫js代碼處理，把組件里面的輸入框變?yōu)榭勺x，添加readonly屬性
解決如下：文章來源地址http://www.zghlxwxcb.cn/news/detail-567686.html
<template>
<el-date-picker
v-model="value1"
type="datetime"
@focus="timeEditable"
placeholder="選擇日期時間">
</el-date-picker>
</template>
timeEditable(){//組件禁止組件里面的input輸入值
this.$nextTick(() => {
let els = document.querySelectorAll('.el-date-picker__editor-wrap input');
for(var i = 0; i <= els.length-1 ; i++){
els[i].setAttribute('readonly','readonly');
}
})
},
文章來源：http://www.zghlxwxcb.cn/news/detail-567686.html
到了這里，關于element-ui el-date-picker禁止手動輸入的文章就介紹完了。如果您還想了解更多內(nèi)容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關文章，希望大家以后多多支持TOY模板網(wǎng)！
