Escenario del proyecto:
A veces, el formato de datos de tiempo ( 2021-08-04T14:39:47.939 ) que nos devuelve el backend en el proyecto no es lo que queremos mostrar al final, y el efecto de visualización no es bueno. En este momento, necesitamos inicializar los datos de tiempo devueltos para lograr el efecto de visualización final (2021-08-04 14:39:47 ) .
El efecto de visualización de los datos de tiempo devueltos por el backend:
solución:
Al comienzo del período, quería presentar el complemento moment.js, vincular el método de procesamiento del formato de tiempo y, específicamente, convertir la marca de tiempo. Aunque el efecto final se puede lograr, considerando la necesidad de descargar e instalar el complemento...
Al descubrir el atributo de formateador en el uso de la tabla Table en Element UI , se puede usar para formatear el valor de la columna especificada, aceptar una función y pasar dos parámetros: fila y columna, que se pueden procesar según sus propias necesidades. Se elimina la operación de instalar y configurar moment.js, y la eficiencia y el rendimiento son mayores.
Pasos:
1. Agregue el atributo del formateador en la columna de atributos de la columna de tabla electrónica de la columna de tiempo de vinculación
<el-table-column
v-if=" stateTag == 0 "
prop="create_time"
:formatter="formatTime"
label="录入时间"
align="center"
></el-table-column>2. Defina el método de función de este atributo en los métodos y procese el formato de tiempo en consecuencia (aquí solo está el formato de datos de tiempo que necesito aquí, el procesamiento de formato específico debe determinarse de acuerdo con sus propias necesidades, el principio es el mismo, el problema no es grande)
// 时间格式化
formatTime(row, column){
let data = row[column.property]
let dtime = new Date(data)
const year = dtime.getFullYear()
let month = dtime.getMonth() + 1
if (month < 10) {
month = '0' + month
}
let day = dtime.getDate()
if (day < 10) {
day = '0' + day
}
let hour = dtime.getHours()
if (hour < 10) {
hour = '0' + hour
}
let minute = dtime.getMinutes()
if (minute < 10) {
minute = '0' + minute
}
let second = dtime.getSeconds()
if (second < 10) {
second = '0' + second
}
return year+ '-' + month+ '-' + day + ' ' + hour + ':' + minute + ':' + second
},3. Después de correr un rato, salió el efecto, seguía siendo muy bueno y cumplió con las expectativas.
Los siguientes son artículos relacionados con el procesamiento del tiempo, bienvenidos a comunicarse y ¡esperamos ser útiles para usted! ! !
Selector de fecha y hora "opción de acceso directo" : elemento Selector de fecha y hora DateTimePicker, para los datos de tiempo específicos devueltos por la interfaz, realice el procesamiento de "opción de rango de tiempo de acceso directo"
Realización del efecto de temporizador simple: Realización del efecto de cuenta regresiva simple de JavaScript