@drwhite87

Vue-tables-2. Как выводить данные из вложенных объектов?

Здравствуйте.

Для вывода списков на проекте использую Vue-tables-2.
Как выводить данные в столбец, если они находятся во вложенном объекте.
Например:

{
  id: 1,
  category: {
    name: 'Категория 1',
  }
  user: {
    name: 'Иван Иванов',
    city: {
      name: 'Москва'
    },
    country: {
      name: 'Россия'
    }
  }
}

Как вывести в таблицу ФИО пользователя, название страны и города?

Нашел одно решение через templates:
columns: [
	'id',
	'contactName',
	'contactCity',
	'category',
],
options: {
	templates: {
		contactName(h, row){
			return row.user ? row.user.name : '';
		},
		contactCity(h, row){
			return row.user.city ? row.user.city.name : '';
		},
		category(h, row){
			return row.category ? row.category.name : '';
		}
	},
}

но оно не совсем подходит, так как поиск по этим полям не работает.

Подскажите, пожалуйста, может есть еще какие то способы? Нужно чтобы работал поиск

Спасибо
  • Вопрос задан
  • 903 просмотра
Решения вопроса 1
0xD34F
@0xD34F Куратор тега Vue.js
Поиск по свойствам вложенных объектов "из коробки" не предусмотрен. Так что без костылей не обойтись.

Вижу три варианта:
  • Перенос свойств вложенных объектов непосредственно в объект строки таблицы. То есть, сейчас у вас есть { user: { city: { name: "..." } } } , а будет { userCityName: "..." } или { user_city_name: "..." }, как-то так.
  • Создание кастомных фильтров по столбцам, созданным с помощью templates. Всё вручную - создание фильтра, написание логики его работы и т.д. Также из минусов данного подхода - элементы управления кастомных фильтров находятся за пределами таблицы, в отличие от встроенных. Нагуглил пример реализации, на его основе сделал пример поиска по свойствам вложенных объектов.
  • Наконец, можно обернуть данные в Proxy. Определять templates в этом случае не нужно, всё работает так, будто интересующие нас свойства принадлежат не вложенным объектам, а непосредственно объекту строки таблицы. Соответственно, и встроенный поиск тоже доступен. Идея в чем: делаем get-ловушку, в ней режем имя свойства, например "user.city.name", на куски, идём вглубь по полученной цепочке имён, достаём значение. Опять же, сделал небольшой пример.
Ответ написан
Комментировать
Пригласить эксперта
Ответы на вопрос 1
kulakoff
@kulakoff Куратор тега Vue.js
Vue.js developing
А в чем проблема привести ваш объект к виду, который, подходит для таблицы.
Ответ написан
Комментировать
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы