Upgrade to Pro — share decks privately, control downloads, hide ads and more …

iCARE と Vue.js と コンポーネント設計 と デザインシステムの話

watsuyo_2
August 24, 2021
480

iCARE と Vue.js と コンポーネント設計 と デザインシステムの話

2021/08/24 【Vue.js】急成長スタートアップを支えるフロントエンド戦略 @finatext

watsuyo_2

August 24, 2021
Tweet

More Decks by watsuyo_2

Transcript

  1. iCAREのフロントエンドチーム フルタイムメンバー 2020年10月 入社時 2人 → 2021年8月現在 5人 パートナーメンバー 2021年8月現在

    3人 アドバイザー、技術顧問 2021年8月現在 2人 #vuejs_study | iCAREではエンジニアとデザイナーさんを募集中 「iCARE Dev 採用」 8
  2. Buefyのb-tableを使います b-tableとb-table-columnのセットで成立しています <b-table :data="isEmpty ? [] : data" :bordered="isBordered" :striped="isStriped"

    . . > <b-table-column field="id" label="ID" width="40" :td-attrs="columnTdAttrs" numeric v-slot="props"> {{ props.row.id }} </b-table-column> <b-table-column field="first_name" label="First Name" :td-attrs="columnTdAttrs" v-slot="props"> {{ props.row.first_name }} </b-table-column> <b-table-column field="last_name" label="Last Name" :td-attrs="columnTdAttrs" v-slot="props"> {{ props.row.last_name }} </b-table-column> . . #vuejs_study | iCAREではエンジニアとデザイナーさんを募集中 「iCARE Dev 採用」 29
  3. 本当はこうやって実装したかった Error: You should wrap bTableColumn on a bTable 残念ながら、b-tableは、b-table-columnとの親子関係を強制します

    <carely-table> <template #default="{ row }"> <common-clumn-set :common="row.common1" /> <common-clumn-set :common="row.common2" /> <common-clumn-set :common="row.common3" /> </template> </carely-table> #vuejs_study | iCAREではエンジニアとデザイナーさんを募集中 「iCARE Dev 採用」 31