クエーサーのQTable:究極の構成要素(5/6)-すべてをスタイリング!

私のすばらしいdevy友人を歓迎してください!
私がこのポストを始めたとき、私が何をしていたか全くわからなかった.
私のガールフレンドは他の部屋にいて、韓国ドラマを見ています.
「1時間半」彼女に言った.私はいつ学ぶ!クエーサーのQTable 執拗に便利であり、それのすべての内部の力の時間を取る表示するには!
どなたか
あなたはこの1つを好きになる!
なぜ?
スタイリングq-table 簡単です!それが取るすべては、あちこちの小道具のふりかけです.
それを言って、スタイルに2つの方法がありますq-table :

小道具

スロット

私は、彼らが書くのが簡単であるので、可能である(そして、彼らが我々がこのポストでカバーするものである)小道具を使うことを勧めます、そして、Eaiserは読みます.

あなたはまだQuerarComponentをチェックしていません。COM ?

あなたがシリーズにこれまでに来たならばQuasarComponents.Com , じゃあ何?
Head. There. Now.
何かあるreally cool あなたを示す!
...
を始めましょう.

セットアップ

こちらですle github repo (“Le Github Repo”はフランス語で「フランス語は話せません」)
今すぐあなたのエディタにこれをスラム!
私がコードに飛び込んで、そこであなたに会うところで、再びそのことをしましょう🤿

<script>
import { ref } from 'vue'
// 🤿 Quasar has some rad color utilities!
// We'll use "getPaletteColor" in one of the examples.
import { colors } from 'quasar'
const { getPaletteColor } = colors

// 🤿 did saying "rad" up my street cred? I hope so.

export default {
  setup () {
    // three guesses at what we'll use this for...
    const fullscreen = ref(false)

    const rows = [
      {
        id: 1,
        name: 'Panda',
        email: '[email protected]',
        age: 6
      },
      {
        id: 2,
        name: 'Lily',
        email: '[email protected]',
        age: 5
      },
      {
        id: 3,
        name: 'Moe',
        email: '[email protected]',
        age: 7
      },
      {
        id: 4,
        name: 'Avo Cado',
        email: '[email protected]',
        age: 3
      },
      {
        id: 5,
        name: 'Oscar',
        email: '[email protected]',
        age: 14
      }
    ]

    // 🤿 Oh look, a fish! 🐠

    const columns = [
      { label: 'name', field: 'name', name: 'name', align: 'left' },
      { label: 'email', field: 'email', name: 'email', align: 'left' },
      { label: 'age', field: 'age', name: 'age', align: 'center' }
    ]

    return {
      rows,
      columns,
      columnsStyled,
      fullscreen
    }
  }
}
</script>

コードから現れる🤿
すべてが意味をなすか?
甘い!セクシーなテーブルを作り始めましょう.

色、濃い、暗い、フラット

<q-table
  :rows="rows"
  :columns="columns"
  row-key="id"
  color="green"
  :loading="true"
  dense
  dark
  flat
/>

あなたは、多くの人々が材料設計について好きでないことを知っています?影
まあ何を推測.クエーサーは、いずれかのコンポーネントのすべてからの影を削除することが容易になりますflat or unelevated . 上の例でわかるようにQTable 例外ではない🙃color ローディングバーの色を変更し、選択した項目をページ化します.dense 物事を引き締める.偉大なときに表示するデータの大量を持っている!

平らな正方形の

これを「クリーンカット」と呼びます.これは、テーブルが滑らかでプロフェッショナルに見えるようになります:

<q-table
  :rows="rows"
  :columns="columns"
  row-key="id"
  bordered
  flat
  square
/>

どういう意味ですか.これは、テーブルデザインの“ジェームズボンド”のようなものだ😎
削除するborder . あなたはテーブルが完全にこの例の境界線なしで独自に立っていることに気づくでしょう!

特定のクラスとスタイル

これらの小さなヘルパー小道具は素晴らしいです!通常、あなたはテーブルを設計するのに必要なすべてです.

<q-table
  :rows="rows"
  :columns="columns"
  row-key="id"
  title="Blue Chihuahua's"
  title-class="text-bold text-blue-9"
  table-class="bg-blue-9 text-white"
  table-style="border: 3px solid black;"
  table-header-style="height: 65px;"
  table-header-class="bg-blue-8"
/>

注意してください

タイトル

ヘッダー

ボディ

いいね😊

特定の列のクラスとスタイル

今、これは私がすべての時間を使用するものです.列のオブジェクト自体をタップすることができますので、列のスタイルを変更できます.
Razvan(Quasarの作成者)は、彼が芸術のこの仕事を設計していたとき、次のレベルの禅州のいくつかの並べ替えされている必要があります!

<template>
  <q-table
    :rows="rows"
    :columns="columnsStyled"
    row-key="id"
  />
</template>

<script>
export default {
  setup () {
    // Add this in
    const columnsStyled = [
      {
        label: 'name',
        field: 'name',
        name: 'name',
        align: 'left',
        classes: 'bg-pink-1 text-bold',
        style: {
          fontSize: '1.2em',
          borderLeft: `6px solid ${getPaletteColor('pink-4')}`
        },
        headerClasses: 'bg-grey-1',
        headerStyle: {
          fontSize: '1.2em'
        }
      },
      {
        label: 'email',
        field: 'email',
        name: 'email',
        align: 'left',
        headerClasses: 'bg-grey-3',
        classes: 'bg-pink-2'
      },
      {
        label: 'age',
        field: 'age',
        name: 'age',
        align: 'center',
        headerClasses: 'bg-grey-1',
        classes: 'bg-pink-1'
      }
    ]

    return {
      // And this
      columnsStyled
    }
  }
}

</script>

ハウ.クール.そうです.あれ!
要約すると、ここで使用するカラムオプションは以下の通りです.

クラス

スタイル

ヘッドクラス

ヘッドスタイル

確かに、例は少し混乱して見える.しかし、あなたはアーティストとして学位を得るためにここにいません🎨 (また、あなたは私から1つを得る可能性があります).

ページ

Paginationとスロットを扱うことは、かなり複雑になることができます.幸運にも、我々はこれらの便利なダンディ小道具で我々のPaginationスタイリング問題を解決することができそうです!

<q-table
  :rows="rows"
  :columns="columns"
  row-key="id"
  :rows-per-page-options="[2, 0]"
  rows-per-page-label="records/page"
  icon-first-page="home"
  icon-last-page="all_inclusive"
  icon-next-page="arrow_right"
  icon-prev-page="arrow_left"
  :pagination-label="(firstRowIndex, endRowIndex, totalRowsNumber) => {
    return `page ${endRowIndex}/${totalRowsNumber}`
  }"
/>

ここで注意すべきクールなものはpagination-labelWith pagination-label , 我々は、我々が単純な機能で我々の現在のPaginationの「地位」を示す方法を変えることさえできます!

ヘッダー行と底を隠す( pure table )

場合によっては、単純なolテーブルが必要です.いいえ見出し、フッター、ないpagination.ちょうど“基本的なテーブル”することができます.
このようにして我々はそれを行うことができますQTable :

<q-table
  :rows="rows"
  :columns="columns"
  row-key="id"
  hide-header
  hide-bottom
/>

それは私がそれについて言わなければならないすべてです🤷

ページパスの隠蔽(自動削除する場合があります)。

しばしば、私たちはページネーションを必要としません.ちょっと隠しましょう

<q-table
  :rows="rows"
  :columns="columns"
  row-key="id"
  hide-pagination
  :rows-per-page-options="[0]"
/>

重要
ページを非表示にすると、ページの機能を削除できません.言い換えると、あなたはデータの5/10行だけを見るかもしれなくて、それの残りを見る方法がありません(Paginationコントロールが隠されている時から)!
そういうわけで我々は加えました:rows-per-page-options="[0]" 上の例では.
あなたは、ページネーションからのポストから覚えているかもしれません、0はすべてを意味します.したがって、基本的に、そのコードは、ページ化が隠されているので、すべての行を示すことを保証しています.
また、下の行に表示する他の何もない場合は、下の行が全く表示されません(例のように)

データの隠蔽

私は、これをする正当な理由を考えることができません、しかし、もちろん、クエーサーはデフォルトの「NOデータ」メッセージを隠すことを可能にします.

<q-table
  :rows="[]"
  :columns="columns"
  row-key="id"
  hide-no-data
/>

NOthinしかし今ヘッダー!

目に見えるコラム

多分、私はそれがとても便利であるので、リストの上にこのfurthurを置かなければなりませんでした!
私たちは簡単に列を隠すことができますvisible-columns prop :

<q-table
  :rows="rows"
  :columns="columns"
  row-key="id"
  :visible-columns="['name', 'age']"
/>

は、visible-columns 配列は、name 対応するプロップcolumns オブジェクト.
うーん、それは口いっぱいだった.それを数回読む必要があります!
私のアプリのいくつかでは、我々はq-menu 上の行には、人々がメニューを使用してオンとオフの列を切り替えることができます!これは簡単ですvisible-columns ! 多分、それはもう一つのブログ柱でありえました🤔

フルスクリーン

「何だ!?QTable フルスクリーンをサポート!"
はい.しない😉

<q-table
  :rows="rows"
  :columns="columns"
  row-key="id"
  :fullscreen="fullscreen"
  title="dogs"
>
  <template #top-right>
    <q-btn
      dense
      flat
      icon="fullscreen"
      @click="fullscreen = !fullscreen"
    />
  </template>
</q-table>

この例では、ボタンを#top-right それはフルスクリーンのオンとオフを切り替えます.ケーキ🍰

セパレータとラップセル

デフォルトではQTable 行は水平線で区切られます.もちろん、我々はどちらかにこれを変えることができますvertical ライン、またはフルcellこの例では、私たちもwrap-cells . wrap-cells それは長いテキストがセルで正しくラップを保証するように便利です!「avo - cado」についてのみ明らかです

<q-table
  :rows="rows"
  :columns="columns"
  row-key="id"
  separator="cell"
  style="width: 300px;"
  wrap-cells
/>

使用可能なオプションseparator は

水平

垂直

細胞

なし

動いて!

ラベルなし

デフォルトを変更no-data ラベル:

<q-table
  :rows="[]"
  :columns="columns"
  row-key="id"
  no-data-label="I can't find any data 😞"
/>

データラベルの読み込み

とデフォルトloading-data ラベル:

<q-table
  :rows="[]"
  :columns="columns"
  row-key="id"
  :loading="true"
  loading-label="Gimme a sec and I'll fetch ya data!"
/>

グリッドモード

私は正直になります、私は私の人生で使用されていないグリッドモード(このブログの記事を書くまで).
しかし、一部の人々はそれを愛するので、ここに行く!

<q-table
  :rows="rows"
  :columns="columns"
  row-key="id"
  grid
  card-class="bg-indigo-9 text-white"
  card-style="padding: 22px;"
/>

この例では、我々はまた、グリッドカードのスタイリングをタップしている!

無ホバー( Q - TD , Q - TR )

最後に、少なくとも、私たちは“デフォルト”の効果を削除することができますQTable .
これらはq-td and q-tr , それで、我々はこれを使用してこれを実証しなければなりません#body テンプレート.

<q-table
  :rows="rows"
  :columns="columns"
  row-key="id"
>
  <template #body="props">
    <q-tr
      no-hover
      :props="props"
    >
      <q-td
        key="name"
        no-hover
        :props="props"
      >
        {{ props.row.name }}
      </q-td>

      <q-td
        key="email"
        no-hover
        :props="props"
      >
        {{ props.row.email }}
      </q-td>

      <q-td
        key="age"
        no-hover
        :props="props"
      >
        {{ props.row.age }}
      </q-td>
    </q-tr>
  </template>
</q-table>

ちょっと絵で話すのが難しい😅

Aaand我々は完了です！

だからそこに行く!何かがあるならばQTable スタイリングは、私をヒット.
私は今のすべてを見ているように感じるので、私はあなたを助けることができる良いチャンスがある🙂
そして、私を信頼してください、あなたはチェックアウトしたいですQuasarComponents.Com !
Quasarは誰にも劣らない巨大なコンポーネントライブラリを持っていますAll 72 Of Those Components
読書のおかげで、親愛なる読者をしてください.…
あなたが枕を打って、夜に漂うので、あなたの心にこの考えを保ってください🌙
あなたが構築することはできません.