Business
Jobs
  • About Us
  • Solutions
    • Job Postings
      Post your job and receive qualified candidates in 48h.
    • Candidate Assessments
      500+ technical and psychological tests, plus anti-fraud.
    • Headhunting
      Tailor-made executive search from start to finish.
    • Payroll + EOR
      Payroll dispersal and EOR across 15+ LATAM countries.
  • Pricing
  • Jobs

0

405
Views
Cómo usar las tablas de datos de Vuetify con clasificación de fecha personalizada sin romper la agrupación

Estoy usando el componente de tablas de datos de vuetify para mostrar objetos de este esquema:

 { date: '2021-12-23T11:12:18.669Z', type: 0, name: 'Meter-234452', temperature: '46', param_value: '23', floor_temp: '23' },

Pero en mi gancho montado estoy anulando el campo de fecha para formatearlo según lo solicitado por el propietario del producto:

 ... moment(date).format('DD.MM.YYYY HH.mm')

También estoy agrupando los datos por el campo "nombre" que funciona perfectamente bien. Pero ordenar los datos por fecha no funciona en absoluto, solo los ordenará por el día que tiene sentido.

Traté de especificar una función personalizada en el accesorio de custom-sort del componente de la siguiente manera:

 customSort (items, sortBy, sortDesc, locale) { const activeSortColumn = sortBy[0] const activeSortDesc = sortDesc[0] items.sort((a, b) => { if (activeSortColumn === 'date') { const dateA = moment(a.date, 'DD.MM.YYYY HH.mm').toDate() const dateB = moment(b.date, 'DD.MM.YYYY HH.mm').toDate() return activeSortDesc ? dateA - dateB : dateB - dateA } return activeSortDesc ? ('' + a[activeSortColumn]).localeCompare(b[activeSortColumn]) : ('' + b[activeSortColumn]).localeCompare(a[activeSortColumn]) }) return items },

Esto funciona perfectamente bien si no uso la agrupación, pero si estoy agrupando y especificando esta función de clasificación personalizada, se verá así:

Vista de tabla

La clasificación sigue siendo correcta, pero también cambió la agrupación, lo que también tiene sentido. Supongo que se está ordenando y luego agrupando, lo que hace que se creen grupos duplicados.

No estoy seguro de cómo resolver esto, ya que me gustaría mantener la agrupación, pero también debo proporcionar la clasificación correcta para el formato de fecha y todas las demás columnas a la vez. Me di cuenta de que el parámetro sortBy será una matriz que también incluye el campo agrupado si se está utilizando, así que pensé en ordenar la matriz de datos dos veces.

Agradezco cualquier ayuda!

about 4 years ago · Santiago Trujillo
1 answers
Answer question

0

Ahora lo resolví con una solución alternativa configurando la propiedad de clasificación del encabezado de la tabla para que se clasifique. Fue bastante complicado encontrar esto, por lo que en caso de que alguien más se encuentre con este problema, consulte el ejemplo de encabezado de tabla de la API v-data-table .

Lo usé para especificar una función de clasificación separada solo para este encabezado de tabla como este:

 customSort (a, b) { return moment(a, this.tableDateFormat).toDate() - moment(b, this.tableDateFormat).toDate() },

También funcionará con fechas simples de JavaScript, pero también estamos usando el momento para el resto de nuestro proyecto.

about 4 years ago · Santiago Trujillo Report
Answer question
Find remote jobs

Discover the new way to find a job!

Top jobs
Top job categories
Business
Post vacancy Pricing Sales
Legal
Terms and conditions Privacy policy
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Show me some job opportunities
There's an error!