当elementui中的属性无法满足需求时,可以使用原生js对组件进行修改,因为组件也是基于原生js进行封装的:
完整代码如下:
<template><div><el-date-pickerv-model="time1"type="datetime"popper-class="reset-popper":default-value="defaultTime"@focus="pickerChange"></el-date-picker></div></template><script>export default {data() {return {time1: '',defaultTime: '',}},methods: {pickerChange(val) {let that = this;if (document.getElementsByClassName('reset-popper').length < 1) {setTimeout(() => {let ele = document.getElementsByClassName('reset-popper')[0];ele.addEventListener('click', function (evt) {if (evt.target.parentNode.parentNode.parentNode.className == 'el-date-table__row') {let timeEleArr = ele.getElementsByClassName('el-date-picker__header')[0].getElementsByClassName('el-date-picker__header-label');let t = timeEleArr[0].innerText.split(' ')[0] + '-' + timeEleArr[1].innerText.split(' ')[0] + '-' + evt.target.innerText;let current = new Date().toLocaleDateString().split('/').join('-');if (current == t) {that.time1 = new Date();} else {that.time1 = new Date(t + ' 08:00:00');}}})}, 1000)}}}}</script>
需要注意一个问题就是,因为日期时间选择器展示下拉框的时候,可能会存在一些延迟,如果下拉框还没渲染出来就去获取dom对象是获取不到的,可以用setTimeout
来解决,先设置一些时间让下拉框先渲染出来,再去执行获取dom的操作;