Buefy - липкие верхние и нижние колонтитулы

Buefy - это UI-фреймворк, основанный на Bulma.

В этой статье мы рассмотрим, как использовать Buefy в нашем приложении Vue.

Прикрепленные заголовки и столбцы

Мы можем добавить опору sticky-header для отображения таблицы прокрутки с фиксированными заголовками.

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

<template>
  <div id="app">
    <b-table :data="data" :columns="columns" sticky-header height="100px"></b-table>
  </div>
</template>
<script>
export default {
  name: "App",
  data() {
    const data = [
      {
        id: 1,
        first_name: "james",
        last_name: "smith"
      },
      {
        id: 2,
        first_name: "mary",
        last_name: "jones"
      },
      {
        id: 3,
        first_name: "alex",
        last_name: "wong"
      }
    ];
    return {
      data,
      columns: [
        {
          field: "id",
          label: "ID",
          width: "40",
          numeric: true
        },
        {
          field: "first_name",
          label: "First Name"
        },
        {
          field: "last_name",
          label: "Last Name"
        }
      ]
    };
  }
};
</script>

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

Мы можем добавить свойство sticky, чтобы сделать столбец липким при прокрутке:

<template>
  <div id="app">
    <b-table :data="data" :columns="columns" sticky-header></b-table>
  </div>
</template>
<script>
export default {
  name: "App",
  data() {
    const data = [
      {
        id: 1,
        first_name: "james",
        last_name: "smith"
      },
      {
        id: 2,
        first_name: "mary",
        last_name: "jones"
      },
      {
        id: 3,
        first_name: "alex",
        last_name: "wong"
      }
    ];
    return {
      data,
      columns: [
        {
          field: "id",
          label: "ID",
          width: "40",
          numeric: true,
          sticky: true
        },
        {
          field: "first_name",
          label: "First Name"
        },
        {
          field: "last_name",
          label: "Last Name"
        }
      ]
    };
  }
};
</script>

Переключить столбцы

Мы можем отображать и скрывать столбцы с помощью опоры visible:

<template>
  <div id="app">
    <b-table :data="data" :columns="columns" sticky-header></b-table>
  </div>
</template>
<script>
export default {
  name: "App",
  data() {
    const data = [
      {
        id: 1,
        first_name: "james",
        last_name: "smith"
      },
      {
        id: 2,
        first_name: "mary",
        last_name: "jones"
      },
      {
        id: 3,
        first_name: "alex",
        last_name: "wong"
      }
    ];
    return {
      data,
      columns: [
        {
          field: "id",
          label: "ID",
          width: "40",
          numeric: true,
          visible: true
        },
        {
          field: "first_name",
          label: "First Name",
          visible: true
        },
        {
          field: "last_name",
          label: "Last Name",
          visible: false
        }
      ]
    };
  }
};
</script>

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

Нижний колонтитул

Мы можем заполнить слот footer столбцами. Например, мы можем написать:

<template>
  <div id="app">
    <b-table :data="data" :columns="columns">
      <template slot="footer">
        <th>
          <div class="th-wrap is-numeric">ID</div>
        </th>
        <th>
          <div class="th-wrap">First Name</div>
        </th>
        <th>
          <div class="th-wrap">Last Name</div>
        </th>
      </template>
    </b-table>
  </div>
</template>
<script>
export default {
  name: "App",
  data() {
    const data = [
      {
        id: 1,
        first_name: "james",
        last_name: "smith"
      },
      {
        id: 2,
        first_name: "mary",
        last_name: "jones"
      },
      {
        id: 3,
        first_name: "alex",
        last_name: "wong"
      }
    ];
    return {
      data,
      columns: [
        {
          field: "id",
          label: "ID",
          width: "40",
          numeric: true
        },
        {
          field: "first_name",
          label: "First Name"
        },
        {
          field: "last_name",
          label: "Last Name"
        }
      ]
    };
  }
};
</script>

Мы добавляем th элементов в footer, чтобы заполнить ячейки.

Заключение

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