Способ доступа к методу сортировки по умолчанию из таблиц данных в Vuetify

ProgramBox

Способ доступа к методу сортировки по умолчанию из таблиц данных в Vuetify

Post author:admin
Запись опубликована:13 декабря, 2022
Post category:Вопросы по программированию

#vue.js #vuetify.js

Вопрос:

Я пытаюсь добавить функциональность по умолчанию для сортировки информации внутри таблицы данных из Vuetify, но я не смог заставить ее появиться.

Изолированная среда кода с некоторыми комментариями: https://codesandbox.io/s/vuetify-2-forked-wfhe9?file=/src/App.vue

 <template>
  <v-app>
    <div>
      <v-data-table
        :headers="headers"
        :items="data"
        class="elevation-1 mt-4"
        :items-per-page="5"
        hide-default-header
      >
        <template v-slot:header="{ header }">
          <thead>
            <tr>
              <th
                v-for="(h, index) in headers"
                class="text-subtitle-2"
                style="border-bottom: 2px solid #bdc6d8"
                :key="index"
              >
                <v-tooltip bottom :key="h.value">
                  <template v-slot:activator="{ sort }">
                    <span v-on="sort">{{ h.text }}</span>
                  </template>
                </v-tooltip>
              </th>
            </tr>
          </thead>
        </template>
        <template #item="{ item }">
          <tr>
            <td style="border: 0; height: 70px">
              {{ item.name }}
            </td>
            <td style="border: 0; height: 70px">
              {{ item.date }}
            </td>
            <td style="border: 0; height: 70px">
              {{ item.quantity }}
            </td>
            <td style="border: 0; height: 70px">
              {{ item.expirationDate }}
            </td>
          </tr>
        </template>
      </v-data-table>
    </div>
  </v-app>
</template>

<script>
export default {
  data() {
    return {
      headers: [
        {
          text: "Name",
          align: "start",
          value: "name",
        },
        {
          text: "Date",
          align: "start",
          value: "date",
        },
        {
          text: "Quantity",
          align: "start",
          value: "quantity",
        },
        {
          text: "Expiration",
          align: "start",
          value: "expirationDate",
        },
      ],
      currentProds: [
        {
          name: "Proc 1",
          date: "01/01/01",
          quantity: 123,
          expirationDate: "01/02/02",
        },
        {
          name: "Proc 1",
          date: "01/01/01",
          quantity: 123,
          expirationDate: "01/02/02",
        },
        {
          name: "Proc 1",
          date: "01/01/01",
          quantity: 123,
          expirationDate: "01/02/02",
        },
        {
          name: "Proc 1",
          date: "01/01/01",
          quantity: 123,
          expirationDate: "01/02/02",
        },
        {
          name: "Proc 1",
          date: "01/01/01",
          quantity: 123,
          expirationDate: "01/02/02",
        },
      ],
    };
  },
};
</script>

<style>
</style>

Поискав в Google, я нашел код, который, по-видимому, работает, но только в предыдущих версиях (я использую последнюю).

Почему я снова делаю заголовок? Дизайнер попросил другое border bottom , поэтому, пытаясь сделать это, я снова сделал thead, используя слот.

Я не хочу добавлять пользовательскую сортировку, только по умолчанию.

Есть ли способ сделать это в версии 2.4.3 версии Vuetify?

1. Не могли бы вы добавить массив заголовков? Кроме того, вы имеете в виду сортировку, щелкнув имя столбца или другим способом?

2. @LastM4N конечно, я пытался воспроизвести свою проблему в изолированной среде кода, но не смог заставить ее работать… Это что-то вроде кода, который я сейчас включил в публикацию. Спасибо за ответ

3. @sgf_1 можете ли вы поделиться песочницей?

4. Просто добавьте заголовки, нам не нужна никакая изолированная среда

5. @DaniilLoban конечно, codesandbox.io/s/vuetify-2-forked-wfhe9?file=/src/App.vue Я просто хочу, чтобы заголовок сохранял стиль, который я туда поместил, с возможностью сортировки по умолчанию с помощью Vuetify.

Ответ №1:

Мне нравится этот пример из документов, также обратите внимание на dataSort функцию, для правильной реализации сортировки:

   const dataSort = ((a, b) =>  a.split('/').reverse().join('/') <=  b.split('/').reverse().join('/') ? -1: 1)


  new Vue({
    el: '#app',
    vuetify: new Vuetify(),
    data () {
      return {
        currentProds: [
          {
            name: "Proc 1",
            date: "07/01/01",
            quantity: 3,
            expirationDate: "07/02/02",
          },
          {
            name: "Proc 2",
            date: "02/01/01",
            quantity: 2,
            expirationDate: "02/02/03",
          },
          {
            name: "Proc 3",
            date: "01/01/01",
            quantity: 1,
            expirationDate: "01/02/01",
          },
          {
            name: "Proc 4",
            date: "01/01/01",
            quantity: 5,
            expirationDate: "01/02/02",
          },
          {
            name: "Proc 5",
            date: "01/01/01",
            quantity: 4,
            expirationDate: "01/02/02",
          },
        ],
      }
    },
    computed: {
      headers () {
        return [
          {
            text: 'Name',
            align: 'start',
            value: 'name',
          },
          {
            text: 'Date',
            value: 'date',
            sort: dataSort   // <----- important!
          },
          { 
            text: 'Quantity',
            value: 'quantity',
          },
          { 
            text: 'Expiration Date',
            value: 'expirationDate',
            sort: dataSort,  // <----- important!
          },
        ]
      },
    },
  })

 <head>
  <meta charset="UTF-8">
  <title>CodePen - Vuetify Calendar Event Dragamp;#39;namp;#39;Drop</title>
  <script src='https://cdn.jsdelivr.net/npm/babel-polyfill/dist/polyfill.min.js'></script>
  <script src="https://cdn.jsdelivr.net/npm/vue@2.6.12"></script>
  <script src='https://cdn.jsdelivr.net/npm/vuetify@2.4.3/dist/vuetify.min.js'></script>
  <link rel='stylesheet' href='https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900'>
  <link rel='stylesheet' href='https://cdn.jsdelivr.net/npm/@mdi/font@5.x/css/materialdesignicons.min.css'>
  <link rel='stylesheet' href='https://fonts.googleapis.com/css?family=Material Icons'>
  <link rel='stylesheet' href='https://cdn.jsdelivr.net/npm/vuetify@2.4.3/dist/vuetify.min.css'>

<style>

.theme--light.v-data-table>.v-data-table__wrapper>table>tbody>tr:not(:last-child)>td:last-child,
.theme--light.v-data-table>.v-data-table__wrapper>table>tbody>tr:not(:last-child)>td:not(.v-data-table__mobile-row),
.theme--light.v-data-table>.v-data-table__wrapper>table>tbody>tr:not(:last-child)>th:last-child,
.theme--light.v-data-table>.v-data-table__wrapper>table>tbody>tr:not(:last-child)>th:not(.v-data-table__mobile-row),
.theme--light.v-data-table>.v-data-table__wrapper>table>thead>tr:last-child>th
{
    border-bottom: 0
}
.theme--light.v-data-table>.v-data-table__wrapper>table>thead>tr:last-child>th {
    border-bottom: 2px solid #bdc6d8;
}    
</style>
</head>
<body>
  <div id="app">
    <v-app id="inspire">
      <div>
        <v-data-table
          :headers="headers"
          :items="currentProds"
          item-key="name"
        >
        </v-data-table>
      </div>
    </v-app>
  </div>
</body>

Развернуть фрагмент кода

1. Спасибо! Я попробовал это, но моя проблема в том, что мне нужно заново создать заголовок, потому что мне нужно оформить его по-другому. Итак, если вы посмотрите на код, я поместил несколько v-образных слотов внутри таблицы данных. Дизайнер запросил «border-bottom: 2px solid #bdc6d8″, и у компонента есть тег стиля с ограниченной областью действия. Мой обходной путь состоял в том, чтобы переделать заголовок и добавить значок с помощью <template v-slot:activator=»{ sort }»><span v-on=»sort»>{{ h.text }}</span></template> но сортировка больше не раб отает. Я ищу способ поместить сортировку в v-образный слот, если это имеет какой-то смысл

2. может быть, лучше добавить немного стиля?

3. Я добавил стили к сниппету

4. Это работает !! большое вам спасибо! Мне пришлось добавить ::v-deep в селектор, как вы получили этот конкретный селектор?

5. Я нашел это с помощью dev-tools, когда искал стиль border-bottom