QuasarのQTable :究極のコンポーネント( 3/6 ) -読み込み状態、ページネーション、および並べ替え

36213 ワード
webdev vue javascript quasar テキストリンク
閉じるこの動画はお気に入りから削除されています.
あなたは既にロード状態、ページネーションと並べ替えが正しいかを知っていますか?
甘い!プリアンブルは必要ありません、ちょうど右に飛び込んでください.
ああ、WACK this link あなたが望むならばLearn All 72 Of Quasar's Components !
さあ始めましょう!

セットアップ


ただコードをしたいですか?githubレポは、ここにあります!ldiebold/q-table-blog
我々は、このブログでいくつかのファンシーパンツのものを行うので、バックエンドが必要です.幸いにも、私はあなたのためだけに無料APIを構築!このエンドポイント.
https://table.quasarcomponents.com/dogs
データでsquizを取る!あなたが下にスクロールするならばmeta プロパティを使用すると、我々はPaginationを持っていることに気づくでしょう.
{
  data: [
    {
      id: 1,
      created_at: "2021-08-17T01:29:29.000000Z",
      updated_at: "2021-08-17T01:29:29.000000Z",
      name: "Hollie",
      email: "[email protected]",
      age: 9
    },
    {
      id: 2,
      created_at: "2021-08-17T01:29:29.000000Z",
      updated_at: "2021-08-17T01:29:29.000000Z",
      name: "Sonya",
      email: "[email protected]",
      age: 19
    }
  ],
  links: {
    first: "http://table.quasarcomponents.com/dogs?page=1",
    last: "http://table.quasarcomponents.com/dogs?page=34",
    prev: null,
    next: "http://table.quasarcomponents.com/dogs?page=2"
  },
  meta: {
    current_page: 1,
    from: 1,
    last_page: 34,
    links: [
      {
        url: null,
        label: "« Previous",
        active: false
      },
      {
        url: "http://table.quasarcomponents.com/dogs?page=1",
        label: "1",
        active: true
      }
    ],
    path: "http://table.quasarcomponents.com/dogs",
    per_page: 15,
    to: 15,
    total: 500
  }
}

Note that much of the data and links have been removed for brevity


Axiosを必要とするので、そのエンドポイントをヒットするのは簡単です.
yarn add axios
今我々はそれを使用します<script> :
<script>
import { defineComponent, ref } from 'vue'
import axios from 'axios'

export default defineComponent({
  setup () {
    const loading = ref(true)
    const dogs = ref([])

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

    // Fetch dogs
    axios.get('https://table.quasarcomponents.com/dogs')
      .then(response => {
        dogs.value = response.data.data
      })
      .finally(() => {
        loading.value = false
      })

    return {
      columns,
      loading,
      dogs
    }
  }
})
</script>
あなたが前の2つのポストを読んだならば、これは意味をなし始めます.
いくつかのデータを設定し、いくつかの列の設定を行い、犬をフェッチし、更新しますdogs 配列をトグルするloading 状態、テンプレートにそれを公開!

負荷状態


クエーサーは、我々が我々をセットするとき、我々に単純な、美しい荷バーを与えますloading プロップtrue . また、テーブルを尊重color 支柱!
さあ、お見せしましょう.
<q-table
  color="secondary"
  :loading="loading"
  :rows="dogs"
  :columns="columns"
/>

それだ!あなたはそれをロードするためにページを更新する必要があるかもしれません(特にあなたがパリにいるならば、それはサーバーがどこにあるかについてわかっています!)
また、ちょうど設定することができます:loading="true" . 私は通常スタイリングで遊んでこれを行う!
それは基本的なローディングですが、もちろん.
クエーサーはスロットでトータルコントロールを与える🙃

支線積みスロット


この動画を見る#loading この例のスロット
<q-table
  :loading="loading"
  :rows="dogs"
  color="primary"
>
  <template #loading>
    <q-inner-loading
      showing
      color="primary"
    />
  </template>
</q-table>

クエーサーの使用QInnerSpinner コンポーネントは、“読み込み”の表示の美しい代替方法を作成することができます.
私は個人的にこれは甘いと思う!
ああ、それは十分なロードあなた狂気のdev😁. ページを見てみましょう.

ページ


クエーサーのQTable あなたがモデル化することによって、あなたがPaginationpagination .
スクリプトに加えましょう
export default defineComponent({
  setup () {
    // ...
    const pagination = ref({
      sortBy: 'name',
      descending: false,
      page: 1,
      rowsPerPage: 3
    })

    return {
      // ...
      pagination
    }
  }
}
これらのページのオプションのほとんどは、おそらくあなたに意味をなす.クエーサーも私たちを与えることに注意してくださいsortBy and descending .sortBy and descending テーブルにデフォルトのソートを設定できます.私が働くところでは、クライアントがしばしば彼らのデータをデフォルトでアルファベット順に見たいので、これを使います.
ソートアルゴリズムを変更することができる方法を後で示します(私は常にアルゴリズム“アルゴリズム”を使用してスマート感じている)
では、このページデータをテーブルにモデル化しましょう.
<q-table
  v-model:pagination="pagination"
  color="secondary"
  :loading="loading"
  :rows="dogs"
  :columns="columns"
/>

かなりクールなハウ?
また、ページオプションの行をプロップで変更することもできます.
<q-table
  v-model:pagination="pagination"
  :rows-per-page-options="[3, 5, 10, 0]"
  color="secondary"
  :loading="loading"
  :rows="dogs"
  :columns="columns"
/>

クェーサー大好き❤️
あなたがパワーユーザーであるならば、あなたはあなたの腕を考えているかもしれません
それがクェーサーでピーカンパイの部分であるので、よく、それらの武器をアンクロスしてください!

サーバ側のページ付け(ペカンパイ)


これが私がなぜhttps://table.quasarcomponents.com/dogs API!それで、我々は簡単にサーバー側のページ付けで遊ぶことができます.
私はこの例は少し関与しているので、私の説明をコードに移動するつもりです!……
⬇️コードブロックへのジャンプ⬇️
<template>
  <!--
    Why hello there!
    Meet me at the "script" section. That's where the magic happens 🪄
  -->
  <q-page
    padding
    class="flex justify-center"
  >
    <div
      class="full-width q-gutter-xl"
    >
      <!--
        Two things to notice here
        1. "rows-per-page-options" has been emptied.
            We're going to let the server decide how many "rows per page"
        2. @request is fired whenever a pagination is clicked! Handy 🙂
       -->
      <q-table
        v-model:pagination="pagination"
        :rows-per-page-options="[]"
        color="secondary"
        :loading="loading"
        :rows="dogs"
        :columns="columns"
        @request="onRequest"
      />
    </div>
  </q-page>
</template>

<script>
import { defineComponent, ref } from 'vue'
import axios from 'axios'

export default defineComponent({
  setup () {
    // And here we are!
    // I'll only comment on the parts that are different 😉
    const loading = ref(true)
    const dogs = ref([])

    const pagination = ref({
      // No longer using sort. if needed, this can now be done using the backend!
      // sortBy: 'name',
      // descending: false,
      page: 1,
      rowsPerPage: 15,
      // When using server side pagination, QTable needs
      // to know the "rows number" (total number of rows).
      // Why?
      // Because Quasar has no way of knowing what the last page
      // will be without this information!
      // Therefore, we now need to supply it with a "rowsNumber" ourself.
      rowsNumber: 0
    })

    const columns = [
      { name: 'name', label: 'Name', field: 'name', align: 'left', sortable: true },
      { name: 'age', label: 'Age', field: 'age', align: 'center' },
      { name: 'email', label: 'Email', field: 'email' }
    ]

    // Fetch dogs
    const fetchDogs = (page = 0) => { // we can specify the "page" to jump to
      loading.value = true
      return axios.get('https://table.quasarcomponents.com/dogs', {
        params: { page: page } // here, we tell the api what "page" to jump to
      })
        .then(response => {
          dogs.value = response.data.data
          // The api gives us "meta data".
          // this meta data gives us everything we
          // need to get pagination working!
          const meta = response.data.meta

          // We now update "pagination" with our meta data
          // from the server. This is where the magic happens 🪄
          pagination.value.page = meta.current_page
          pagination.value.rowsPerPage = meta.per_page
          pagination.value.rowsNumber = meta.total
        })
        .finally(() => {
          loading.value = false
        })
    }

    // QTable exposes a @request method (see the <template>)
    // This will be called when one of the pagination buttons are clicked.
    // it gives us everything we need, including the new page number!
    const onRequest = (props) => {
      fetchDogs(props.pagination.page)
    }

    // The initial fetch
    fetchDogs()

    return {
      onRequest,
      columns,
      loading,
      dogs,
      pagination
    }
  }
})
</script>
⬆️コードブロックから飛び出す⬆️
なんとクールだった!?!
コードブロックの中にいるのは変です.今度は寒かったので、今度コートを取らなければならないでしょう🧥
誰でも
結果を見てみましょう.

それで、あなたは行きます.サーバー側のページネーションはクエーサーとの爆発です!
そして、あなたが本当に完全な制御を望むならば、あなたはQuasarのものを使うことができましたQPagination コンポーネントと完全置換QTable 'という.
右、今日の最後のトピックに移動しましょう/夜/夕方/朝(米国DEVsは、worldyの人々です).

ソート


基本的なソートをしたいですか?クエーサーはyaのソートを得た!ハ!冗談を言った!
アヘム
ソートは1つだけ小道具です.
const columns = [
  { name: 'name', label: 'Name', field: 'name', align: 'left', sortable: true },
  { name: 'age', label: 'Age', field: 'age', align: 'center', sortable: true },
  { name: 'email', label: 'Email', field: 'email', sortable: true }
]
お知らせsortable: true すべての列で?
また、“見出し”セルの1つの上にホバーしたとき、我々は並べ替えの矢印を取得します.
sortable: true ほとんどの場合、仕事をするでしょう、さもなければ、我々は使うことができます.

カスタムソート


自分のソート機能を使用する必要がありますか?いいえ問題!
この例では、ドメインによってメールを使用して並べ替えます.
const columns = [
  { name: 'name', label: 'Name', field: 'name', align: 'left', sortable: true },
  { name: 'age', label: 'Age', field: 'age', align: 'center', sortable: true },
  {
    name: 'email',
    label: 'Email',
    field: 'email',
    sortable: true,
    sort: (a, b) => {
      const domainA = a.split('@')[1]
      const domainB = b.split('@')[1]
      return domainA.localeCompare(domainB)
    }
  }
]
ボンアプリ表!

我々は、現在我々自身のソータでソートしています!ソータクール右?

「次は？」"


次のポストでは、QTableの究極の力で贈り物をするつもりです!
我々は、クエーサーのスロットのすべてをカバーするつもりです!
あなたはそれを欠場するつもりはない!スロットを与えるQTable 無限の柔軟性💪

もう少し必要な方は…。


クエーサーは、巨大な印象的なコンポーネントライブラリを持っています.
APIは喜びであなたの膝にあなたをもたらす!柔軟性はあなたの承認をあなたの頭を頷くし、美しいコミュニティは、このフレームワークと恋に落ちるにつながるでしょう.
探検の価値がある何かのような音?
もちろん!
今すぐにQuasarComponents.Com そして、あなたが決して忘れない旅にあなたを連れて行かせてください!
教えてあげるall 72 アクションのクエーサーのコンポーネントの場合は、コードに興奮!
Click Here and I'll see you on the other side!
それはすべて私の親愛なるdevの友人です.今、あなたは私に非常に重要な好意を与えてもらえますか?
今夜寝て、この1つのことを夢見てください.
あなたが構築することはできません.
Redis Clusterのデータスライスメカニズム
[実戦]JSを使用してHTMLを処理(1)