CSVファイルを読み込むだけのVueコンポーネントをnpmに公開しました


www.npmjs.com

 

こんな感じですね。

データを<table> に描画している部分はこのコンポーネント外での実装です。

 

https://i.gyazo.com/338e9c39b1fee39db63343c586b392b7.gif

 

https://www.npmjs.com/package/vue-csv-loader

 

 

 CSVファイルを選択後するとファイルを読み込んでヘッダ部分と実データ部分の2つの配列を作成します。

f:id:jacoyutorius:20190814113801p:plain

 

`loadSuccess`というイベント名で$emitされるので、親コンポーネント側で`loadSuccess` を定義してそこで読み込まれたデータを受け取ることができます。

f:id:jacoyutorius:20190814114039p:plain

 

propsなどはこのようになっています。

f:id:jacoyutorius:20190814114027p:plain

 

近々作らなくてはいけないアプリケーションのためにnpmパッケージとして切り出した感じなので、使い勝手とかエンコードとかあまり考慮されていませんがとりあえずということでー。