Таблицы Vue 2 пользовательских имен заголовков - PullRequest
Новая
       19

Таблицы Vue 2 пользовательских имен заголовков

1 голос
/ 01 июня 2019

Я новичок в мире VueJS, я пытаюсь создать простое приложение CRUD. Мы решили использовать библиотеку vue-tables-2, она прекрасно работает со следующим кодом: 

<template>
  <div id="users">
    <v-server-table url="users" :columns="columns">
    </v-server-table>
  </div>
</template>
<script>
  export default {
    name: 'UsersContainer',
    components: {},
    data() {
      return {
        columns: ["fullName", "age", "city"]
      }
    },
  }
</script>

Показывает данные, однако заголовки - это просто свойства в случае верблюда.

Мне нужно добавить пользовательский заголовок, например, FullName должно быть Name Можно ли изменить заголовки?

1 Ответ

1 голос
/ 01 июня 2019

Это легко достижимо.Согласно официальной документации , вы можете предоставить options компоненту таблицы.

В вашем случае вы можете изменить свой фрагмент следующим образом: 

<template>
  <div id="users">
    <v-server-table url="users" :options="options" :columns="columns">
    </v-server-table>
  </div>
</template>
<script>
  export default {
    name: 'UsersContainer',
    components: {},
    data() {
      return {
        columns: ["fullName", "age", "city"],
        options: {
          headings: {
            fullName: 'Name',
            age: 'Age',
            city: 'City'
          }
        }
      }
    },
  }
</script>

Как вы можете видеть из приведенного выше фрагмента, мы возвращаем объект, свойства которого - это свойства вашего элемента, а значенияжелаемые заголовки.

...