Как создать таблицу данных, которую можно редактировать в реальном времени, в Vue.js

1656592215 kak sozdat tabliczu dannyh kotoruyu mozhno redaktirovat v realnom vremeni

Питер Мбануго

amAbqxZ4tOE9-w6Cn43e4HSknd18RuV7hezm
Фото Франки Чамаки на Unsplash

В программах, управляемых данными, таблица данных используется для отображения данных в табличном формате с возможностью редактирования и удаления записей на месте. Когда вы работаете с Vue, существуют различные компоненты с открытым кодом, которые можно использовать для легкого добавления таблицы данных в программу.

Многие программы сегодня имеют функции реального времени, и вы можете задаться вопросом, как вы можете синхронизировать редактирование и удаление данных в режиме реального времени. Для этого есть три варианта:

  1. Используйте API WebSocket. Это не лучший вариант, если некоторые из пользователей используют браузеры, которые еще не поддерживают WebSocket.
  2. Используйте библиотеку, которая отвлекает эти различия между браузерами с помощью резервного механизма, например Socket.IO, SignalR и SockJS. С помощью этой опции вам придется управлять сервером, обрабатывающим большое количество открытых соединений, и заниматься зумом.
  3. Используйте службу, которая предоставляет библиотеку, которая выполняет то же, что и предыдущий вариант, но управляет сервером и соответственно масштабируется. Это лучший вариант для компаний и команд, использующих (или принявших) бессерверный подход.

Я покажу вам, как создать таблицу данных, которую можно редактировать в реальном времени, в Vue.js, используя Hamoni Sync в качестве службы синхронизации состояния в режиме реального времени. На рисунке ниже показано, что мы будем строить:

JKuAr28AYFl1z-bZJR2jNTO3l8e1glrYOqc0

Чтобы продлить, вам нужно иметь базовые знания Vue. Если вы не знаете Vue, вы можете прочитать мой предыдущий пост, чтобы ознакомиться с Vue.js. Вам также понадобятся следующие инструменты:

  1. Node.js & npm (перейдите по ссылке, чтобы загрузить программу установки для вашей ОС)
  2. Vue CLI для создания нового проекта Vue. Если у вас этого нет, бегайте npm install -g vue-cli@2.9.6 с командной строки, чтобы установить его.

Настройте проект

Мы настроим проект с помощью Vue CLI и шаблона Vuetify. Откройте командную строку и запустите команду vue init vuetifyjs/simple realtime-datatable-vue. Вам будет предложено ввести имя и автора, поэтому примите значение по умолчанию, нажав Enter для каждой подсказки. Это объединит новый проект Vue с синглом. index.html файл.

Этот файл содержит ссылки на сценарии Vue и Vuetify. Vuetify – это компонент материального дизайна для Vue.js. Он имеет a v-data-table компонент с функциями сортировки, поиска, разбиения на страницы, встроенного редактирования, подсказок заголовка и выбора строк.

Добавьте компонент таблицы данных

Откройте файл index.html с помощью текстового редактора (или IDE). Замените содержимое онлайн 50 со следующим:

<div>    <v-dialog v-model="dialog" max-width="500px">    <v-btn slot="activator" color="primary" dark class="mb-2">New Item</v-btn>    <v-card>        <v-card-title>        <span class="headline">{{ formTitle }}</span>        </v-card-title>        <v-card-text>        <v-container grid-list-md>            <v-layout wrap>            <v-flex xs12 sm6 md4>                <v-text-field v-model="editedItem.name" label="Dessert name"></v-text-field>            </v-flex>            <v-flex xs12 sm6 md4>                <v-text-field v-model="editedItem.calories" label="Calories"></v-text-field>            </v-flex>            <v-flex xs12 sm6 md4>                <v-text-field v-model="editedItem.fat" label="Fat (g)"></v-text-field>            </v-flex>            <v-flex xs12 sm6 md4>                <v-text-field v-model="editedItem.carbs" label="Carbs (g)"></v-text-field>            </v-flex>            <v-flex xs12 sm6 md4>                <v-text-field v-model="editedItem.protein" label="Protein (g)"></v-text-field>            </v-flex>            </v-layout>        </v-container>        </v-card-text>        <v-card-actions>        <v-spacer></v-spacer>        <v-btn color="blue darken-1" flat @click.native="close">Cancel</v-btn>        <v-btn color="blue darken-1" flat @click.native="save">Save</v-btn>        </v-card-actions>    </v-card>    </v-dialog>    <v-data-table :headers="headers" :items="desserts" hide-actions class="elevation-1">    <template slot="items" slot-scope="props">        <td>{{ props.item.name }}</td>        <td class="text-xs-right">{{ props.item.calories }}</td>        <td class="text-xs-right">{{ props.item.fat }}</td>        <td class="text-xs-right">{{ props.item.carbs }}</td>        <td class="text-xs-right">{{ props.item.protein }}</td>        <td class="justify-center layout px-0">        <v-btn icon class="mx-0" @click="editItem(props.item)">            <v-icon color="teal">edit</v-icon>        </v-btn>        <v-btn icon class="mx-0" @click="deleteItem(props.item)">            <v-icon color="pink">delete</v-icon>        </v-btn>        </td>    </template>    </v-data-table></div>

Код выше добавляет a v-dialog компонент для отображения диалогового окна для сбора данных для новых записей или редактирования существующей записи. Кроме того, это добавляет v-data-table отображающий таблицу. Нам необходимо определить данные и методы, используемые этими компонентами. После строки 126добавьте такой код к свойствам данных:

dialog: false,headers: [    {        text: 'Dessert (100g serving)',        align: 'left',        sortable: false,        value: 'name'    },    { text: 'Calories', value: 'calories' },    { text: 'Fat (g)', value: 'fat' },    { text: 'Carbs (g)', value: 'carbs' },    { text: 'Protein (g)', value: 'protein' },    { text: 'Actions', value: 'name', sortable: false }],desserts: [],editedIndex: -1,editedItem: {    name: '',    calories: 0,    fat: 0,    carbs: 0,    protein: 0},defaultItem: {    name: '',    calories: 0,    fat: 0,    carbs: 0,    protein: 0},listPrimitive: null

The desserts Свойство data будет содержать данные для отображения в таблице. The editedItem свойство будет содержать значение для редактируемой записи и editedIndex будет сохранять индекс редактируемой записи.

Добавьте следующие свойства после data определение свойства после строки 189:

computed: {    formTitle() {        return this.editedIndex === -1 ? 'New Item' : 'Edit Item'    }},
watch: {    dialog(val) {        val || this.close()    }},

Мы добавили а computed и watch собственность. The computed свойство определяет formTitle который дает диалоговому компоненту название на основе значения editedIndex. The watch имущественные часы dialog когда его значение меняется. Если значение меняется на false, функция вызывает close() что будет определено позже.

Добавить Hamoni Sync

На этом соединении необходимо добавить Hamoni Sync. Он используется для синхронизации состояния программы и обрабатывает разрешение конфликтов во избежание переопределения одним пользователем данных другого пользователя. Чтобы использовать Hamoni Sync, необходимо зарегистрировать учетную запись и идентификатор приложения. Выполните эти шаги, чтобы создать приложение в Hamoni.

  1. Зарегистрируйтесь и войдите на панель Hamoni.
  2. Введите имя программы в текстовое поле и нажмите кнопку Создать. Это должно создать программу и отобразить ее в списке приложений.
  3. Нажмите кнопку «Показать идентификатор аккаунта», чтобы увидеть идентификатор аккаунта.
xuqPh053ZqsE3kInM55NSiY41ZG05f7VWED4

Ниже приведена ссылка на сценарий Vuetify онлайн 139добавьте ссылку на Hamoni Sync:

<script src="https://unpkg.com/hamoni-sync@0.4.0/hamoni.dev.js"><;/script>

Затем нам нужно инициализировать Hamoni Sync после того, как будет смонтирован компонент Vue. Добавьте а mounted имущество ниже watch собственность:

mounted: function () {    let hamoni = new Hamoni("ACCOUNT_ID", "APP_ID");
    hamoni.connect().then(() => {        hamoni          .get("vue-table")          .then(primitive => {            this.listPrimitive = primitive            this.desserts = [...primitive.getAll()]            this.subscribeToUpdate()          }).catch(error => {              if (error === "Error getting state from server") {                this.initialise(hamoni);              }              else {                 alert(error);              }          })    }).catch(alert)},

Из приведенного выше кода мы инициализируем Hamoni Sync с помощью аккаунта и идентификатора программы. Замените заполнители строк идентификатором учетной записи и программой с информационной панели. Затем он подключается к серверу Hamoni посредством вызова hamoni.connect() возвращающий обещание.

После подключения мы звоним hamoni.get() с названием государства, хранящегося в Хамоне. Чтобы получить состояние от Hamoni, его нужно создать, в противном случае он вернет ошибку. Я обработал эту ошибку в блоке catch, чтобы она вызвала другую функцию для инициализации состояния в Hamoni Sync.

Если вызов для получения состояния программы удается, он возвращает объект, который будет использоваться для изменения данных, содержащихся в этом состоянии. Этот объект называется примитивом Sync. Существует три типа примитивов Sync:

  1. Примитивное значение: этот тип состояния содержит простую информацию, представленную такими типами данных, как строка, логическое значение или число. Он лучше всего подходит для таких случаев, как количество непрочитанных сообщений, переключение и т.д.
  2. Примитивный объект: состояние объекта представляет состояния, которые можно моделировать как объект JavaScript. Примером использования может служить сохранение счета игры.
  3. List Primitive: содержит список объектов состояния. Объект состояния – это объект JavaScript. Вы можете обновить элемент на основе его индекса в списке.

Для этого примера мы использовали примитивный список. Мы называем primitive.getAll() получить государство и передать его desserts. После этого он вызывает функцию subscribeToUpdate(). Эта функция будет использоваться для подписки на события изменения состояния от Hamoni Sync.

Добавьте следующий код после mounted собственность в сети 215:

methods: {  initialise(hamoni) {    hamoni.createList("vue-table", [      {        name: 'Frozen Yogurt',        calories: 159,        fat: 6.0,        carbs: 24,        protein: 4.0      },      {        name: 'Ice cream sandwich',        calories: 237,        fat: 9.0,        carbs: 37,        protein: 4.3      },      {        name: 'Eclair',        calories: 262,        fat: 16.0,        carbs: 23,        protein: 6.0      }    ]).then(primitive => {      this.listPrimitive = primitive      this.desserts = this.listPrimitive.getAll()      this.subscribeToUpdate();    }).catch(alert)  },
  subscribeToUpdate() {    this.listPrimitive.onItemAdded(item => {      this.desserts.push(item.value)    })
    this.listPrimitive.onItemUpdated(item => {      //update the item at item.index      this.desserts.splice(item.index, 1, item.value);    })
    this.listPrimitive.onItemDeleted(item => {      //remove the item at item.index      this.desserts.splice(item.index, 1);    })  },
  editItem(item) {    this.editedIndex = this.desserts.indexOf(item)    this.editedItem = Object.assign({}, item)    this.dialog = true  },
  deleteItem(item) {    const index = this.desserts.indexOf(item)    confirm('Are you sure you want to delete this item?') && this.listPrimitive.delete(index)  },
  close() {    this.dialog = false    setTimeout(() => {      this.editedItem = Object.assign({}, this.defaultItem)      this.editedIndex = -1    }, 300)  },
  save() {    if (this.editedIndex > -1) {      this.listPrimitive.update(this.editedIndex, this.editedItem)    } else {      this.listPrimitive.push(this.editedItem)    }
    this.close()  }}

Вышеприведенный код определяет функции, на которые мы ссылались.

The initialise() функция создает примитив списка с названием as vue-table.

The subscribeToUpdate() функции содержат код для обработки, когда элемент добавляется, обновляется или удаляется из примитива списка.

The deleteItem()функция удаляет элемент из примитива списка путем вызова listPrimitive.delete(index) с индексом элемента, который нужно удалить.

The save() вызовы функций listPrimitive.push(editedItem) чтобы добавить новый элемент к примитиву списка, и вызывает listPrimitive.update(editedIndex, editedItem) для обновления записи по определенному индексу.

Это весь код, необходимый для достижения нашей цели – таблицы данных, которую можно редактировать в реальном времени. Откройте index.html файл в вашем браузере, и приложение готово к использованию!

FObytUBfPksl2aGCLfy0dQSUOv10LjBJ68ok

Это обертка!

Мы создали таблицу данных, которую можно редактировать в реальном времени, в Vue.js. Hamoni Sync позволяет легко добавлять функции в режиме реального времени. И Vuetify и Hamoni Sync имеют пакеты npm, если вы работаете с системой сборки и используете компоненты с одним файлом. Вы можете найти исходный код GitHub.

Ресурсы

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *