vue-table-2: clicking to expand a row ends up expanding all the rows

[sunmingtao]

Clicking any row will see all the rows expanded.

Vue

<v-client-table :columns="teamColumns" :data="teams" :options="teamOptions">
   <div slot="child_row" slot-scope="props">
     More info
   </div>
</v-client-table>
....
export default {
    data () {
        return {
            teams: [
                {name: 'Man city', totalProfit: '200', ....}, 
                {name: 'Man united', totalProfit: '-100', ....}, 
            ],
            teamColumns: ['name', 'totalProfit', ...],
            teamOptions: {
                headings: {
                    name: 'Team',
                    totalProfit: 'Total profit',
                    ....
                },
             }
        }
    }
}

[sunmingtao]

Turns out the table data must have an id field in order for child row feature to work. So change teams to

teams: [
     {id: 100, name: 'Man city', totalProfit: '200', ....}, 
     {id: 200, name: 'Man united', totalProfit: '-100', ....}, 
]