<template> <div> <Table border ref="selection" :columns="columns4" :data="data1"></Table> <Button @click="handleSetData">Set Data</Button> <Button @click="handleClearData">Clear Data</Button> <Button @click="handleSelectAll(true)">Set all selected</Button> <Button @click="handleSelectAll(false)">Cancel all selected</Button> </div> </template> <script> export default { data () { return { columns4: [ { type: 'selection', width: 60, align: 'center' }, { title: 'Name', key: 'name' }, { title: 'Age', key: 'age' }, { title: 'Address', key: 'address' } ], data1: [ ] } }, methods: { handleSelectAll (status) { this.$refs.selection.selectAll(status); }, handleSetData () { this.data1 = [ { name: 'John Brown', age: 18, address: 'New York No. 1 Lake Park', date: '2016-10-03' }, { name: 'Jim Green', age: 24, address: 'London No. 1 Lake Park', date: '2016-10-01' }, { name: 'Joe Black', age: 30, address: 'Sydney No. 1 Lake Park', date: '2016-10-02' }, { name: 'Jon Snow', age: 26, address: 'Ottawa No. 2 Lake Park', date: '2016-10-04' } ]; }, handleClearData () { this.data1 = []; } } } </script>