57 lines
1.3 KiB
Vue

<template>
<div>
<ds-space><h3>Members</h3></ds-space>
<ds-table :data="GroupMembers" :fields="tableFields">
<template slot="avatar">
<ds-avatar online size="small" name="Hans Peter"></ds-avatar>
</template>
<template slot="loves" slot-scope="scope">
{{ scope.row.name }} loves {{ scope.row.loves }}
</template>
<template slot="edit" slot-scope="scope">
<ds-button size="small" @click="deleteRow(scope.row)">delete</ds-button>
</template>
</ds-table>
</div>
</template>
<script>
export default {
name: 'GroupMember',
data() {
return {
tableFields: ['avatar', 'name', 'type', 'loves', 'edit'],
GroupMembers: [
{
name: 'Rengar',
type: 'Jungler',
loves: 'Hide and seek',
},
{
name: 'Renekton',
type: 'Toplaner',
loves: 'Slice and dice',
},
{
name: 'Twitch',
type: 'ADC',
loves: 'Spray and pray',
},
{
name: 'Blitz',
type: 'Support',
loves: 'Hook you up',
},
],
}
},
methods: {
deleteRow(row) {
const index = this.tableData.indexOf(row)
if (index > -1) {
this.tableData.splice(index, 1)
}
},
},
}
</script>