var Main = { data() { return { tableData: [{ date: '2016-05-03', name: '太郎', address: '東京' }, { date: '2016-05-02', name: '次郎', address: '大阪' }, { date: '2016-05-04', name: '三郎', address: '高知' }, { date: '2016-05-01', name: '大五郎', address: '俺とお前と' }] } } } var Ctor = Vue.extend(Main) new Ctor().$mount('#app')
@import url("//unpkg.com/[email protected]/lib/theme-chalk/index.css");
<script src="//unpkg.com/vue/dist/vue.js"></script> <script src="//unpkg.com/[email protected]/lib/index.js"></script> <div id="app"> <template> <el-table :data="tableData" stripe style="width: 100%"> <el-table-column prop="date" label="日付" width="180"> </el-table-column> <el-table-column prop="name" label="名前" width="180"> </el-table-column> <el-table-column prop="address" label="住所"> </el-table-column> </el-table> </template> </div>