クエーサーのQTable:究極のコンポーネント(1/6)-セットアップ、データと列!

クエーサー72コンポーネントがあります!あなたが一人一人の上でビデオを見たいならば、見てくださいQuasarComponents.Com .
また、YouTubeのUIを構築するようなボーナスの束は、ライブクエーサーのチャットアプリを作成し、非常に独自のアプリケーションの拡張子とQuasar UIライブラリを作り上げると.
すべての収益は、クエーサーの開発を支援するために直接行く!
かなりクールなハウ?
So check it out , で、他のすべてのクールな猫に参加QuasarComponents.Com
さあ、楽しみましょうQTable !!!

セットアップ

決して前にクエーサーを使用?あなたが沿って続くことができるように、QuasarをセットアップするTLLRは、ここにあります🙂

npm install -g @quasar/cli

quasar create q-table-play

cd q-table-play

quasar dev

またはクローンThe Github Repo .
これで、モバイル、デスクトップ、スパ、PWA、SSR、さらにはブラウザの拡張機能にエクスポートできるアプリがあります.冗談じゃないよ.
さあ行きましょうQTable !

データ

QTableは、最も豪華に設計された、壮大に巧みに作られて、よくウェブ上で構成された構成要素です.なぜ?
それは素晴らしいパターン(他のすべてのクエーサー成分のように).

Easy to get started, yet configurable to the nth degree!

今すぐチェックアウト.

<q-table
  :rows="[
    {
      name: 'Panda',
      email: '[email protected]',
    },
    {
      name: 'Lily',
      email: '[email protected]',
    }
  ]"
/>

そうですね.我々はそれをオブジェクト(配列)の配列を与え、それはテスラよりもスムーズに実行されます.
しかし、それはよりよくなります.

カラムの指定

それで、あなたはコラムをカスタマイズできますか?
もちろん、あなたはすることができます!

<q-table
  title="My Chihuahuas"
  :rows="[
    {
      name: 'Panda',
      email: '[email protected]',
      age: 6
    },
    {
      name: 'Lily',
      email: '[email protected]',
      age: 5
    }
  ]"
  :columns="[
    {
      label: 'Dog Name',
      field: 'name',
      name: 'name',
      align: 'left'
    },
    {
      label: 'Email',
      field: 'email',
      name: 'email',
      align: 'left'
    },
    {
      label: 'Age',
      field: 'age',
      name: 'age',
      align: 'center',
      format: age => `${age} years`
    }
  ]"
/>

You would probably want to move the columns and data out of the template, I just want to keep these examples simple 🙂

単純な権利?
私たちはすべての列のためにその悪いBoiをオブジェクトに与えます.列の順序を変更してみてください.
また、フォーマッタを追加できますformat (参照)そして、何か他の何かが、ここにあります.
簡単にできますalign 内容を設定し、label !
我々もsortable , style , classes もっと!チェックアウトqcolumn SMhere をクリックするColumn すべてのオプションを参照するには
しかし、我々は「タイトル」のような基本を必要とします、そして、もちろん...ダークモード

タイトルとダークモード

何を待つ?あなたのテーブルはダークモードをサポートしていませんか?どのように、あなたは夜眠りますか?
ジャストファイン.乗り越えなさい.
真剣に、ダークモードはかなり甘いし、クエーサーのQTable あいまいさでそれをサポートするdark プロパティ!
我々がそれをしている間、使いましょうseparator 水平線と垂直線を追加するには!
また、ページ付けを削除する:rows-per-page-options="[0]" (以降のPaginationで)、そして我々はスペースを節約するために一番下の行を非表示にします!
何か知ってる?それらのセルはあまりにも太ったlookin waaayです.さあ、一緒にdense プロパティ!

<q-table
  dark
  :rows-per-page-options="[0]"
  hide-bottom
  separator="cell"
  dense
  :rows="[
    {
      name: 'Panda',
      email: '[email protected]',
    },
    {
      name: 'Lily',
      email: '[email protected]',
    },
  ]"
/>

そこに行く.そのおかげでdark プロパティ、我々はヒップです.とコーディングコミュニティで受け入れ🙄 😆

ああそんなに多く来て！

それで、あなたはそれを持ちます!これは、6部シリーズの始まりです.私は、あなたと共有するためにとてもクールな$^*と経度%を持ちます、そして.
あなたが私と同じくらいQuasarの構成要素が好きであるならばQTable , ミートミーオーバーQuasarComponents.Com
すべての72のクエーサー成分をカバーします.

ビルのUI

ライブクエーサーチャットアプリを作成する

当社の非常に独自のアプリケーションの拡張子をクェーサーUIライブラリをクラフト

すべての収益は、クエーサーチームに直接送られます
それで、読書に感謝します.明日は拡張可能な行と選択可能な行をカバーします.本当にクールなもの、クエーサーはそれを簡単になります😉
そして覚えて!
あなたが構築することはできません.