Vue tables2 Simple

Vue tables2 Simple

by kimulla

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.8/vue.min.js"></script>
<script src="https://rawgit.com/matfish2/vue-tables-2/master/dist/vue-tables-2.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<h3 class="vue-title">Simple</h3>

<div id="app">
  <v-client-table :columns="columns" :data="data" :options="options">
    <a slot="email" slot-scope="props" :href="`mailto:${props.row.email}`">
    {{props.row.email}}
    </a>
  </v-client-table>
</div>

JavaScript

Vue.use(VueTables.ClientTable);

new Vue({
  el: "#app",
  data: {
    columns: [
      'id',
      'name',
      'email'
    ],
    data: getData(),
    options: {
      headings: {
        id: 'id',
        name: '名前',
        email: 'メールアドレス'
      },
      sortable: [
        'id', 'name'
      ],
      texts: {
        filterPlaceholder: '検索する'
      }
    }
  }
});

function getData() {
  const arr = []
  for (i = 0; i < 5000; i++) {
    arr.push({
      'id': i,
      'name': `sample${i}`,
      'email': `sample${i}@example.com`,
      'group_name': '人事部'
    });
  }
  return arr;
}