クエーサーのQTable:究極のコンポーネント(2/6)-拡張可能な行と選択可能な行

ビデオを好む?私はyaをカバーした!
私は選択可能な行を使用し、拡張可能な行すべての時間!現実の世界の例をあげましょう.
我々はパドックのための“スプレーイベント”を記録し、時々パドックは何度もスプレーされます!パドックによって我々のアプリグループの個々のスプレー、また、“親”の行に“合計量スプレー”を与える!

行のいずれかをクリックすると、何が起こるかを見てください.

農民はそれを愛する!そして何を推測するか
クエーサーのQTableで驚くほど簡単に構築できました!どうやって見せましょう😊
また、下の合計行に注意してください?クエーサーとケーキも!(将来のブログ投稿の概要の行について)
我々が飛び込む前に、見てくださいQuasarComponents.Com いくつかのアクションについては、心臓のドキドキ、爪を噛む、高強度のビデオall 72 of Quasar's components!
click here そして、向こう側であなたに会いましょう😁

ちょっとしたセットアップ

物事がスムーズに実行するようにいくつかの基本的なセットアップをしましょう!

<script>
import { ref } from 'vue'

export default {
  setup () {
    const selected = ref()

    const rows = [
      {
        id: 1,
        name: 'Panda',
        email: '[email protected]',
        age: 6
      },
      {
        id: 2,
        name: 'Lily',
        email: '[email protected]',
        age: 5
      }
    ]

    const columns = [
      { label: 'expand', name: 'expand', field: 'expand' },
      { label: 'id', field: 'id', name: 'id' },
      { label: 'name', field: 'name', name: 'name' },
      { label: 'email', field: 'email', name: 'email' },
      { label: 'age', field: 'age', name: 'age' }
    ]

    return {
      rows,
      columns,
      selected
    }
  }
}
</script>

and here's the github repo

拡張可能な行

拡張可能な行は、#body スロット.どうやってやったの😎

<q-table
  :rows="rows"
  :columns="columns"
  row-key="id"
>
  <template #body="props">
    <q-tr :props="props">
      <!-- Expand cell/button -->
      <q-td
        key="expand"
        name="expand"
        :props="props"
        auto-width
      >
        <!--
          The important part here is
          @click="props.expand = !props.expand"
        -->
        <q-btn
          flat
          round
          :icon="props.expand ? 'remove' : 'add'"
          @click="props.expand = !props.expand"
        />
      </q-td>
      <!--
        Notice that we the "key" matches the columns "name" property
        Notice that we "proxy" the props from #body="props" to our q-td
      -->
      <q-td
        key="id"
        :props="props"
      >
        {{ props.row.id }}
      </q-td>
      <q-td
        key="name"
        :props="props"
      >
        {{ props.row.name }}
      </q-td>
      <q-td
        key="email"
        :props="props"
      >
        {{ props.row.email }}
      </q-td>
      <q-td
        key="age"
        :props="props"
      >
        {{ props.row.age }}
      </q-td>
    </q-tr>
    <!-- We show the row if "props.expand" is toggled to true! -->
    <q-tr
      v-show="props.expand"
      :props="props"
    >
      <q-td colspan="100%">
        <div class="text-left">
          Expanded
        </div>
      </q-td>
    </q-tr>
  </template>
</q-table>

閉鎖

一行拡大

ここで注意するいくつかのこと
最初に#body スロットは、個々の行にタップすることができます
第二:クエーサーのq-tr and q-td 行をビルドするコンポーネント.これは私たち非常識なコントロールを与える!
第3:スコープを使用します.#body="props" ) そしてそれをすべてに渡すq-td and q-tr . これは重要です!それはq-tr 'とq-td 'sは、彼らがもののために必要とするすべてのスタイルを得ますdense and visible-columns (後述)
我々は、行を拡大している場合は/トラックを切り替えることができますprops.expandedそれらを意味するまで前後にそれらの4つのポイントをお読みください!それらを理解し、クエーサーのQTableの上に巨大なパワーがあるでしょう!
また、拡張行では、我々は使用することに注意してくださいcolspan="100%" 基本的に“この行のすべてのスペースを取る”と言う.新しい行を挿入する「作成」ボタンのようなものに役立ちます.
およびauto-width カラム幅の縮小を試みます;チェックボックス/ラジオ/トグルを持つカラムに便利です

各行ごとのセル

詳しくは、拡張行がセルを持ち、親行にセルが並んでいる例を示します.

<!-- Expandable Row (cells) -->
<q-table
  :rows="rows"
  :columns="columns"
  row-key="id"
>
  <template #body="props">
    <!-- PARENT ROW -->
    <q-tr :props="props">
      <!-- Expand cell/button -->
      <q-td
        key="expand"
        name="expand"
        :props="props"
        auto-width
      >
        <q-btn
          flat
          round
          :icon="props.expand ? 'remove' : 'add'"
          @click="props.expand = !props.expand"
        />
      </q-td>
      <q-td
        key="id"
        :props="props"
      >
        {{ props.row.id }}
      </q-td>
      <q-td
        key="name"
        :props="props"
      >
        {{ props.row.name }}
      </q-td>
      <q-td
        key="email"
        :props="props"
      >
        {{ props.row.email }}
      </q-td>
      <q-td
        key="age"
        :props="props"
      >
        {{ props.row.age }}
      </q-td>
    </q-tr>
    <!-- CHILD ROW -->
    <q-tr
      v-show="props.expand"
      :props="props"
    >
      <!--
        Might want to leave the first cell blank, as it is
        simply space for the "expand" column
      -->
      <q-td
        key="expand"
        :props="props"
      />
      <q-td :props="props">
        summary
      </q-td>
      <q-td
        key="id"
        :props="props"
      >
        summary
      </q-td>
      <q-td
        key="name"
        :props="props"
      >
        summary
      </q-td>
      <q-td
        key="email"
        :props="props"
      >
        summary
      </q-td>
      <q-td
        key="age"
        :props="props"
      >
        summary
      </q-td>
    </q-tr>
  </template>
</q-table>

これらの場所は、“概要”….あなたはそれらのセルで好きなものを置くことができます!
ビッグティップprops.row 現在の行にアクセスするには🚣
ハ!ジョークジョーク😆
また、あなたが好きなように多くの“子”の行を持つことができることに注意して価値がある!
そして、私の友人は、拡張可能な行です.今、行を選択可能に移動しましょう.

選択可能な行。クエーサーからの贈り物🎁

これは本当に贈り物です!私は過去に“選択可能な行”機能を実装してきたし、何を知っている?
それは吸う!
クエーサーは2歳の誕生日キャンドルを吹くよりも簡単になります🎂 (あなたはすべきではない、それはクールではない).
チェック!

<q-table
  v-model:selected="selected"
  selection="single"
  :rows="rows"
  row-key="id"
/>

はい!それは本当に簡単です😱😱😱
私もこのコードを説明する必要がありますか?
注意すべきことはrow-key 一意に選択されたデータを識別するために使用されるので、それを必要とするでしょう!
ホットチップ:使用pre タグをテストするときにうまくこのデータを表示する.

<pre>{{ selected }}</pre>

それはすべてのクールな子供がやっている(または私は言われている)です

でも、チェックボックスではなくトグルを使いたいです

ああ!今すぐya!
私の詮索好きな友人を心配しないでください!あなたの袖をロールアップし、これをお試しください!

<q-table
  v-model:selected="selected"
  selection="multiple"
  :rows="rows"
  row-key="id"
>
  <template #header-selection="scope">
    <q-toggle v-model="scope.selected" />
  </template>

  <template #body-selection="scope">
    <q-toggle v-model="scope.selected" />
  </template>
</q-table>

(あなたは私の生意気なログプ冗談を捕まえましたか?)
注意scope.selected は、あなたのために選択をトグルする単純な機能です.簡単右?
あなたはQuasarのAPIがどのようにコンポーネントを至福を構築するかを見始めていますか?愛してる❤️

マルチセレクト

あなたが変更することによって複数の選択を有効にすることができますselection="single" to selection="multiple" 🍪

“ルーク！これはとてもクールだ！もっと欲しい”

ああいい、私はあなたの熱意が大好き!
あなたがこのものについてもっと学びたいならばQuasarComponents.Com
そのシリーズでは、我々は.

カバーall 72 クエーサーの構成要素

ビルドYouTube's UI クエーサーで

ビルドa Live Chat App ラーラーベルとクエーサー

クエーサーを構築するApp Extension

すべての収益は、クエーサーdevチームに直接寄付されます!
Check it out here
読書ありがとう🤓. 明日は、状態、ページ化、および並べ替えをロードします.
さあさあ!そして、コードの愛を忘れないでください.
あなたが構築することはできません.