vue-good-table - Пользовательские строки и столбцы, а также выбор строк

Создание таблиц с нуля - это боль.

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

В этой статье мы рассмотрим, как добавлять таблицы в приложение Vue с помощью плагина vue-good-table.

Добавление настраиваемых столбцов

Мы можем добавлять столбцы, которые не созданы из свойств объектов строк.

Например, мы можем написать:

<template>
  <div>
    <vue-good-table :columns="columns" :rows="rows">
      <template slot="table-row" slot-scope="props">
        <span v-if="props.column.field === 'before'">before</span>
        <span v-else>{{props.formattedRow[props.column.field]}}</span>
      </template>
    </vue-good-table>
  </div>
</template>
<script>
export default {
  data() {
    return {
      columns: [
        {
          label: "Name",
          field: "name"
        },
        {
          label: "Age",
          field: "age",
          type: "number"
        },
        {
          label: "Birthday",
          field: "birthDay",
          type: "date",
          dateInputFormat: "yyyy-MM-dd",
          dateOutputFormat: "MMM do yy"
        },
        {
          label: "Before",
          field: "before"
        }
      ],
      rows: [
        { id: 1, name: "John", age: 20, birthDay: "2000-01-20" },
        { id: 2, name: "Jane", age: 24, birthDay: "1996-10-31" },
        { id: 3, name: "Mary", age: 16, birthDay: "2004-10-30" }
      ]
    };
  }
};
</script>

Мы заполняем слот table-row содержимым, которое хотим отобразить в ячейках столбца.

props.formattedRow[props.column.field] отображает данные из свойств объекта строки.

props.column.field имеет имя поля.

В массив columns добавлен столбец 'before', который не создан на основе свойства строки.

Настраиваемые заголовки столбцов

Мы также можем создавать собственные заголовки столбцов.

Для этого мы заполняем слот table-column нашим собственным контентом.

Затем мы можем проверить props.column.label, чтобы проверить заголовок столбца, который мы хотим изменить.

Например, мы можем написать:

<template>
  <div>
    <vue-good-table :columns="columns" :rows="rows">
      <template slot="table-column" slot-scope="props">
        <span v-if="props.column.label === 'Name'">
          <em>{{props.column.label}}</em>
        </span>
        <span v-else>{{props.column.label}}</span>
      </template>
    </vue-good-table>
  </div>
</template>
<script>
export default {
  data() {
    return {
      columns: [
        {
          label: "Name",
          field: "name"
        },
        {
          label: "Age",
          field: "age",
          type: "number"
        },
        {
          label: "Birthday",
          field: "birthDay",
          type: "date",
          dateInputFormat: "yyyy-MM-dd",
          dateOutputFormat: "MMM do yy"
        }
      ],
      rows: [
        { id: 1, name: "John", age: 20, birthDay: "2000-01-20" },
        { id: 2, name: "Jane", age: 24, birthDay: "1996-10-31" },
        { id: 3, name: "Mary", age: 16, birthDay: "2004-10-30" }
      ]
    };
  }
};
</script>

У нас есть слот table-column с проверкой prop.column.label для проверки заголовка столбца, который мы хотим изменить.

Мы делаем отображение столбца Name курсивным шрифтом с тегом em.

Таблица флажков

Мы можем добавить таблицу с выбираемыми строками.

Для этого мы можем написать:

<template>
  <div>
    <vue-good-table
      :columns="columns"
      :rows="rows"
      :select-options="{
        enabled: true,
        selectOnCheckboxOnly: true, 
        selectionInfoClass: 'selected',
        selectionText: 'rows selected',
        clearSelectionText: 'clear',
        disableSelectInfo: true, 
        selectAllByGroup: true, 
      }"
    ></vue-good-table>
  </div>
</template>
<script>
export default {
  data() {
    return {
      columns: [
        {
          label: "Name",
          field: "name"
        },
        {
          label: "Age",
          field: "age",
          type: "number"
        },
        {
          label: "Birthday",
          field: "birthDay",
          type: "date",
          dateInputFormat: "yyyy-MM-dd",
          dateOutputFormat: "MMM do yy"
        }
      ],
      rows: [
        { id: 1, name: "John", age: 20, birthDay: "2000-01-20" },
        { id: 2, name: "Jane", age: 24, birthDay: "1996-10-31" },
        { id: 3, name: "Mary", age: 16, birthDay: "2004-10-30" }
      ]
    };
  }
};
</script>

Мы добавляем опору selected-options к объекту.

Свойство enabled позволяет нам разрешить выбор строки.

selectOnCheckOnly позволяет нам выбирать строки, когда мы снимаем флажок.

selectionText позволяет отображать количество строк, выделенных нашим собственным текстом.

clearSelectionText - текст, отображаемый в ссылке, чтобы очистить выбор.

disableSelectInfo позволяет нам отключить информацию о выбранной строке. Эта информация должна отображаться над таблицей, если она false.

И selectAllByGroup позволяет нам установить, можем ли мы выбрать все строки сразу.

Заключение

Мы можем изменять столбцы и строки, чтобы отображать то, что мы хотим, заполняя слоты.

Кроме того, мы можем сделать строки доступными для выбора.