Skip to content

Instantly share code, notes, and snippets.

@akmalhazim
Created April 1, 2019 16:39
Show Gist options
  • Save akmalhazim/5e28243c7bc56375938f920e78174ba3 to your computer and use it in GitHub Desktop.
Save akmalhazim/5e28243c7bc56375938f920e78174ba3 to your computer and use it in GitHub Desktop.
<template>
<!--<div>-->
<vs-card>
<vs-table
title="Default"
v-model="selected"
@selected="handleSelected"
:data="users">
code-toggler
<template slot="thead">
<vs-th>
Email
</vs-th>
<vs-th>
Name
</vs-th>
<vs-th>
Website
</vs-th>
<vs-th>
Nro
</vs-th>
</template>
<template slot-scope="{data}">
<vs-tr :data="tr" :key="indextr" v-for="(tr, indextr) in data" >
<vs-td :data="data[indextr].email">
{{data[indextr].email}}
</vs-td>
<vs-td :data="data[indextr].username">
{{data[indextr].username}}
</vs-td>
<vs-td :data="data[indextr].website">
{{data[indextr].website}}
</vs-td>
<vs-td :data="data[indextr].id">
{{data[indextr].id}}
</vs-td>
</vs-tr>
</template>
</vs-table>
</vs-card>
<!--</div>-->
</template>
<script>
export default {
data() {
return {
users:[
{
"id": 1,
"name": "Leanne Graham",
"username": "Bret",
"email": "[email protected]",
"website": "hildegard.org",
},
{
"id": 2,
"name": "Ervin Howell",
"username": "Antonette",
"email": "[email protected]",
"website": "anastasia.net",
},
{
"id": 3,
"name": "Clementine Bauch",
"username": "Samantha",
"email": "[email protected]",
"website": "ramiro.info",
},
{
"id": 4,
"name": "Patricia Lebsack",
"username": "Karianne",
"email": "[email protected]",
"website": "kale.biz",
},
{
"id": 5,
"name": "Chelsey Dietrich",
"username": "Kamren",
"email": "[email protected]",
"website": "demarco.info",
},
{
"id": 6,
"name": "Mrs. Dennis Schulist",
"username": "Leopoldo_Corkery",
"email": "[email protected]",
"website": "ola.org",
},
{
"id": 7,
"name": "Kurtis Weissnat",
"username": "Elwyn.Skiles",
"email": "[email protected]",
"website": "elvis.io",
},
{
"id": 8,
"name": "Nicholas Runolfsdottir V",
"username": "Maxime_Nienow",
"email": "[email protected]",
"website": "jacynthe.com",
},
{
"id": 9,
"name": "Glenna Reichert",
"username": "Delphine",
"email": "[email protected]",
"website": "conrad.com",
},
{
"id": 10,
"name": "Clementina DuBuque",
"username": "Moriah.Stanton",
"email": "[email protected]",
"website": "ambrose.net",
}
]
}
}
}
</script>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment