Vue component to load CSV.
npm install vue-csv-loader
main.js
import VueCsvLoader from "vue-csv-loader";
Vue.use(VueCsvLoader);
App.vue
template
<div id="app">
<section>
<csv-loader v-on:loadSuccess="loadSuccess"></csv-loader>
</section>
<section class="table-container">
<table class="table is-bordered is-hoverable is-fullwidth">
<thead>
<tr v-for="(row, rowIndex) in csvHeader" v-bind:key="rowIndex">
<td v-if="showCheckbox && rowIndex === 0">
<input type="checkbox" />
</td>
<th v-for="(data, colIndex) in row" v-bind:key="colIndex">
{{ data }}
</th>
</tr>
</thead>
<tbody>
<tr v-for="(row, rowIndex) in csvBody" v-bind:key="rowIndex">
<td v-if="showCheckbox">
<input type="checkbox" @change="onCheckBoxCheck(row)" />
</td>
<td v-for="(data, colIndex) in row" v-bind:key="colIndex">
{{ data }}
</td>
</tr>
</tbody>
</table>
</section>
</div>
script
import CsvLoader from "vue-csv-loader";
import "vue-csv-loader/dist/csv-loader.css";
export default {
name: "app",
components: {
CsvLoader
},
data: function() {
return {
showCheckbox: true,
csvHeader: [],
csvBody: []
};
},
methods: {
loadSuccess: function(result) {
this.csvHeader = result.csvHeader;
this.csvBody = result.csvBody;
},
onCheckBoxCheck: function(row) {
console.log(row);
}
}
};