プログラムを書こう!

実務や自作アプリ開発で習得した役に立つソフトウェア技術情報を発信するブログ

Vuetify.js のデータテーブルのフッターの Rows per page 文字列を変更する

この記事は 2021 年 02 月 06 日に投稿しました。

f:id:paveway:20190914064630j:plain

目次

  1. はじめに
  2. Vuetify.js のデータテーブルでチェックボックスを使用する
  3. おわりに

1. はじめに

こんにちは、iOS のエディタアプリPWEditorの開発者の二俣です。
今回は業務で使用しているVuetify.jsデータテーブルのフッターの Rows per page 文字列を変更する方法についてです。

目次へ

2. Vuetify.js のフッターの Rows per page 文字列を変更する

Vuetify.jsデータテーブルのフッターの Rows per page 文字列を変更するには、以下の様な実装にします。

実装例

<!DOCTYPE html>
<html lang="ja">
  <meta charset="utf-8" />
  <link
    href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900"
    rel="stylesheet"
  />
  <link
    href="https://cdn.jsdelivr.net/npm/@mdi/font@5.x/css/materialdesignicons.min.css"
    rel="stylesheet"
  />
  <link
    href="https://cdn.jsdelivr.net/npm/vuetify@2.x/dist/vuetify.min.css"
    rel="stylesheet"
  />
  <link href="./vuetify.min.css" rel="stylesheet" />
  <meta
    name="viewport"
    content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no, minimal-ui"
  />
  <title>Sample</title>
  <body>
    <div id="app">
      <v-app>
        <v-container class="container">
          <!--
            データテーブルを表示します。
            フッターの"Rows per page"文字列を変更します。
          -->
          <v-data-table v-model="selected" :headers="headers" :items="items"
          :footer-props = "{ 'items-per-page-text' : '行/ページ:' }" >
        </v-container>
      </v-app>
    </div>

    <script src="https://cdn.jsdelivr.net/npm/vue@2.x/dist/vue.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/vuetify@2.x/dist/vuetify.js"></script>
    <script src="./vue.js"></script>
    <script src="./vuetify.js"></script>

    <script>
      new Vue({
        el: "#app",

        vuetify: new Vuetify(),

        data: () => ({
          headers: [
            { text: "No", value: "no" },
            { text: "Name", value: "name" },
            { text: "Price", value: "price" },
            ,
          ],
          items: [
            { no: "1", name: "Apple", price: "100" },
            { no: "2", name: "Banana", price: "200" },
            { no: "3", name: "Orange", price: "300" },
          ],
        }),
      });
    </script>

    <style>
      .container {
        width: 600px;
      }
    </style>
  </body>
</html>

実行結果

変更前

f:id:paveway:20210206071040p:plain

変更後

f:id:paveway:20210206071101p:plain

ライブラリ

Vuetify.js

データテーブル

目次へ

3. おわりに

データテーブルのフッターの"Rows per page"は日本人には少し違和感があります。
やはりできれば日本語にしたいと思い変更方法を調査しました。

紹介している一部の記事のコードはGitlabで公開しています。 興味のある方は覗いてみてください。

目次へ


私が勤務しているニューラルでは、主に組み込み系ソフトの開発を行っております。 弊社製品のハイブリッド OS Bi-OSは高い技術力を評価されており、特に制御系や通信系を得意としています。 私自身はiOS モバイルアプリウィンドウズアプリを得意としております。 ソフトウェア開発に関して相談などございましたら、お気軽にご連絡ください。

また一緒に働きたい技術者の方も随時募集中です。 興味がありましたらご連絡ください。

EMAIL : info-nr@newral.co.jp / m-futamata@newral.co.jp TEL : 042-523-3663 FAX : 042-540-1688

目次へ