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

Question

[Дмитрий]

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

Для вывода списков на проекте использую 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 : '';
		}
	},
}

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

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

Спасибо

Answer 1

[0xD34F]

Поиск по свойствам вложенных объектов "из коробки" не предусмотрен. Так что без костылей не обойтись.

Вижу три варианта:

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

Answer 2

[Evgeny Kulakov]

А в чем проблема привести ваш объект к виду, который, подходит для таблицы.