es.davy.ai

Preguntas y respuestas de programación confiables

¿Tienes una pregunta?

Si tienes alguna pregunta, puedes hacerla a continuación o ingresar lo que estás buscando.

  • es.davy.ai/
  • Programación /
  • Tabla de datos de Vuetify: personalizar menú desplegable para ordenar por debajo del punto de quiebre para dispositivos móviles.

Tabla de datos de Vuetify: personalizar menú desplegable para ordenar por debajo del punto de quiebre para dispositivos móviles.

21 Jul, 2023 Programación

Estoy usando las tablas de datos de Vuetify (2.6.1) y funcionan muy bien.
Me pregunto si es posible personalizar la interfaz de usuario en un caso particular:
-> cuando la v-data-table está en modo responsive en el punto de quiebre del móvil.

La interfaz se ve así:

data table list on mobile – sort field highlighted

¿Es posible, solo en este caso, personalizar el selector resaltado en rojo aquí?
Intenté actualizar el CSS global, pero las cosas no están claras porque cuando se selecciona un elemento de la lista se agrega un v-chip:

data table list on mobile with sort selected

Me gustaría que el selector se vea y se comporte exactamente como en este caso resaltado en rojo:

vuetify documentation – select solo style

Busqué en la documentación y la API, Stack Overflow, y en los repositorios de GitHub de Vuetify e intenté diferentes formas, pero no he encontrado una manera correcta de dar estilo al selector de ordenamiento.

¿Alguien tiene alguna idea? Tal vez me esté perdiendo algo.

Gracias por su ayuda.

Tags:  ,

Answer

  1. Avatar for davy.ai
    davy.ai

    Como experto en vue.js y vuetify.js, hay varias formas de personalizar la interfaz de usuario de una v-data-table en el punto de interrupción móvil. Una opción sería utilizar ranuras con alcance (scoped slots) para personalizar la renderización de la tabla de datos en función del punto de interrupción actual. Otra opción sería anular el CSS predeterminado de vuetify para el elemento select que deseas estilizar.

    Para la primera opción, puedes utilizar la propiedad “mobile-breakpoint” en v-data-table para verificar el punto de interrupción actual y luego utilizar una ranura con alcance para renderizar una versión personalizada del elemento select de ordenamiento. En la ranura con alcance, puedes utilizar HTML y CSS normales para crear un elemento select personalizado que coincida con el estilo deseado.

    Aquí tienes un ejemplo usando una ranura con alcance para personalizar el elemento select de ordenamiento:

    <template>
  <v-data-table :headers="headers" :items="items" :mobile-breakpoint="$vuetify.breakpoint.mobileBreakpoint">
    <template #header="{ header }">
      <v-data-table-header :options="header" :mobile-breakpoint="$vuetify.breakpoint.mobileBreakpoint">
        <template #sort="{ active, direction }">
          <custom-sort-select :active="active" :direction="direction"></custom-sort-select>
        </template>
      </v-data-table-header>
    </template>
  </v-data-table>
</template>

<script>
import CustomSortSelect from './CustomSortSelect'

export default {
  components: {
    CustomSortSelect,
  },
  data() {
    return {
      headers: [
        { text: 'Nombre', value: 'name' },
        { text: 'Calorías', value: 'calories' },
        { text: 'Grasa (g)', value: 'fat' },
        { text: 'Carbohidratos (g)', value: 'carbs' },
        { text: 'Proteína (g)', value: 'protein' },
      ],
      items: [
        { name: 'Yogur congelado', calories: 159, fat: 6.0, carbs: 24, protein: 4.0 },
        { name: 'Sandwich de helado', calories: 237, fat: 9.0, carbs: 37, protein: 4.3 },
        { name: 'Éclair', calories: 262, fat: 16.0, carbs: 23, protein: 6.0 },
        { name: 'Cupcake', calories: 305, fat: 3.7, carbs: 67, protein: 4.3 },
        { name: 'Pan de jengibre', calories: 356, fat: 16.0, carbs: 49, protein: 3.9 },
      ],
    }
  },
}
</script>

    En este ejemplo, definimos un componente personalizado llamado “CustomSortSelect” que se utiliza como el elemento select dentro de la ranura con alcance del v-data-table-header. El componente personalizado recibe el campo de ordenamiento activo y la dirección como props, por lo que puede mostrar esos valores de una manera única.

    Para crear el componente “CustomSortSelect”, puedes definir un nuevo componente de vue.js y utilizar HTML y CSS normales para crear el estilo deseado:

    <template>
  <div class="custom-sort-select">
    <select :value="active" @input="emitSortChange($event.target.value)">
      <option disabled="" value="">Ordenar por</option>
      <option v-for="header in headers" :key="header.value" :value="header.value">
        {{ header.text }}
      </option>
    </select>
  </div>
</template>

<script>
export default {
  props: {
    active: String,
    direction: String,
  },
  data() {
    return {
      headers: [
        { text: 'Nombre', value: 'name' },
        { text: 'Calorías', value: 'calories' },
        { text: 'Grasa (g)', value: 'fat' },
        { text: 'Carbohidratos (g)', value: 'carbs' },
        { text: 'Proteína (g)', value: 'protein' },
      ],
    }
  },
  methods: {
    emitSortChange(value) {
      const direction = value === this.active ? this.direction === 'asc' ? 'desc' : 'asc' : 'asc'
      this.$emit('sort', value, direction)
    },
  },
}
</script>

<style>
.custom-sort-select {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 48px;
  background-color: #eee;
  border-radius: 4px;
  margin: 0 16px;
  font-size: 16px;
  color: #585858;
}

.custom-sort-select select {
  appearance: none;
  border: none;
  background-color: transparent;
  color: #585858;
  font-size: 16px;
  margin-right: 8px;
  padding: 0 8px;
}

.custom-sort-select select:focus {
  outline: none;
}

.custom-sort-select select option {
  color: #585858;
}
</style>

    Este componente personalizado renderiza un elemento select que coincide con el estilo deseado de la documentación de vuetify. El elemento select recibe el campo de ordenamiento activo como su valor y emite un evento personalizado “sort” cada vez que el usuario selecciona una nueva opción. El componente padre (la v-data-table) escucha este evento y actualiza el campo de ordenamiento en consecuencia.

    Otra forma de personalizar la interfaz de usuario del elemento select de ordenamiento es anular el CSS predeterminado de vuetify. Esto se puede hacer agregando una nueva regla CSS que apunte a la clase .v-data-table-header__sort-selector–single (que es la clase aplicada al elemento select de ordenamiento en el punto de interrupción móvil).

    Aquí tienes un ejemplo de cómo hacerlo:

    .v-data-table-header__sort-selector--single {
  appearance: none;
  background: url('/ruta/a/flecha/personalizada.svg') no-repeat center right;
  border: none;
  background-color: #fff;
  font-size: 16px;
  padding: 4px 28px 4px 8px;
  text-align: left;
}

.v-data-table-header__sort-selector--single:focus {
  outline: none;
}

.v-data-table-header__sort-selector--single > option {
  font-size: 16px;
  color: #585858;
  background-color: #fff;
}

    En este ejemplo, anulamos el estilo predeterminado del elemento select de ordenamiento en el punto de interrupción móvil. Establecemos la apariencia en “none” para eliminar la flecha predeterminada y, en su lugar, aplicamos una imagen de fondo personalizada utilizando la propiedad “background”. También eliminamos el borde y establecemos el color de fondo en blanco, y ajustamos el tamaño de fuente y el relleno para que coincida con el estilo deseado.

    Ten en cuenta que este enfoque afectará a todas las instancias de v-data-table que utilicen el elemento select único en el punto de interrupción móvil, así que úsalo con precaución.

    En general, hay varias formas de personalizar la interfaz de usuario de una v-data-table en el punto de interrupción móvil. El uso de ranuras con alcance permite tener un mayor control sobre la renderización de componentes individuales, mientras que la anulación del CSS predeterminado puede ser una forma rápida y sencilla de aplicar cambios globales.

Comments are closed.