Отрегулируйте ширину vuetify datatable ширины меню «строк на страницу», потому что текст обрезается - PullRequest
Новая
       21

Отрегулируйте ширину vuetify datatable ширины меню «строк на страницу», потому что текст обрезается

0 голосов
/ 12 апреля 2019

Как сделать так, чтобы текст в строках на меню страницы не обрезался?

В Firefox 60.5 с vuetify 1.4.1, когда я иду, чтобы изменить количество строк на странице, я заметил, что меню обрезало "100".

Я пытался изменить это из этого: 

<v-data-table
  ...
  :rows-per-page-items="[5,10,25,50,100]"
  ...
/>

к этому: 

<v-data-table
   ...
   :rows-per-page-items="[{text:'5', value:5},...,{text:'100', value:100}]"
  ...
/>

думая, что наличие текста будет иметь значение - это не так.

UPDATE
Кроме того, в <style scoped> ... </style> я безуспешно пробовал множество следующих комбинаций: 

/deep/ .v-list__tile__title {min-width: 30px;}
/deep/ .v-list__tile {min-width: 30px;}
/deep/ .v-list__tile__content {min-width: 30px;}
/deep/ .v-list__tile__title {min-width: 30px;}
/deep/ .v-select-list {min-width: 80px;}
/deep/ .v-menu__content{min-width: 80px;}

Ответы [ 2 ]

0 голосов
/ 26 апреля 2019

Хотя это и не идеально, я создал глобальный стиль вместо ограниченного.Другими словами, я перешел от <style scoped> ... </style> к <style> ... </style>.

. В данном конкретном случае я использовал: 

<style> 
  .v-list__tile__title { 
    min-width: 3em;
  }
</style>
0 голосов
/ 13 апреля 2019

Вы должны установить это в своих данных и получить доступ к ним в таблице.Вот так: 

data: () => ({
  pagination: {
    descending: true,
    page: 1,
    rowsPerPage: 5,
    totalItems: 0,
    rowsPerPageItems: [5, 10, 25, 50, 100],
  },
})

тогда, когда вы устанавливаете таблицу данных: 

<v-data-table
  ...
  :pagination.sync="pagination"
  :rows-per-page-items="pagination.rowsPerPageItems"
  :total-items="pagination.totalItems"
  ...
>
...