Ant Design Vue Table Создаем простую таблицу

Пожалуй, один из самых полезных и в тоже время сложных компонентов в Ant Design view - это компонент для работы с таблицами. Он так и называется Table.

Давайте в ближайшей серии видеоуроков рассмотрим основные возможности: как можно создавать и управлять таблицами в Ant Design с помощью компонента Table.

Простой пример использования Ant Design Vue Table

Итак, давайте начнём с самого простого примера.

Для начала нам нужно импортировать компонент Table, что мы с вами и сделаем.

import { Table } from 'ant-design-vue'

Нам требуется компонент Table. Создаём компоненты и добавляем сюда наш Table. 

Давайте добавим его теперь в template для этого создадим родительский элемент div и добавим сюда нашу табличку.

<template>

<div>

<Table></Table>

</div>

</template>

У нас добавилась новая таблица, но пока она пустая. В ней нет никаких данных. Нам нужно добавить сюда какие-то данные. Для того, чтобы добавить какие-то данные, мы должны передать два аргумента для этого компонента, два свойства.

Уровень данных для таблицы

Во-первых это свойство data-source - это источник данных, которые мы туда передаем и cols непосредственно описание тех колонок, которые должны получиться из тех данных, которые мы туда передали то есть мы должны это тоже с вами настроить.

<Table

:data-source="dataSource"

:columns="columns"

>

Давайте скопирую прямо из примера, который приводится в документации.

Data source - источник данных. Это просто массив объектов. Обычный Json объект, который находится в массиве. 

Вы можете добавлять здесь все те поля, которые вам нужны. Вы всё это размещаете в data-source и теперь нам нужно сделать описание для тех колонок, которые мы хотим с вами добавить. 

Я буду постепенно добавлять, чтобы мы увидели этот самый результат. 

Наша задача указать, какие колонки будут в нашей таблице. Для того, чтобы создать колонку описание мы должны передать сюда три свойства.

Это тоже массив объектов и каждый объект описывает какую-то конкретную колонку.

columns: [

        {

          title: 'Имя',

          dataIndex: 'name',

          key: 'name',

        },

]

title - это то, как будет эта колонка называться. Мы берём, смотрим в наш datasource и колонка name у нас есть имя. Давайте попробуем имя вывести. Мы хотим видеть в нашей таблице колонку "Имя". 

Далее указываем dataIndex - это просто ссылка, с какого индекса, что находится в левой части. Какой индекс мы будем с вами использовать из dataSource, для того, чтобы вывести значение. В данном случае мы будем использовать и уникальный ключ. 

Как правило, делают его таким же как индекс, но вы можете что-то своё придумать какое-то другое название.

Давайте посмотрим, что получилось. У нас появилась всего одна колонка Имя и в нее подставляются все те значения, которые есть в нашем dataSource. 

Теперь мы можем скопировать и точно также добавить другие колонки, которые мы можем выводить в нашей таблице. Давайте выведем address (адрес).

Вот такие основы вывода таблиц в Ant Design View. Создаём два свойства, передаем туда объект с данными. Массив объектов с данными и описываем те колонки, которые мы хотим видеть в нашей таблице.