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", на куски, идём вглубь по полученной цепочке имён, достаём значение. Опять же, сделал небольшой пример.
  

UPD. Добавили возможность определять методы фильтрации для отдельных столбцов, так что вот четвёртый вариант.

Answer 2

[Evgeny Kulakov]

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