iview/examples/routers/table.vue

76 lines
2.3 KiB
Vue
Raw Normal View History

<template>
2018-01-19 18:01:21 +08:00
<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 {
2017-07-19 15:09:15 +08:00
data () {
return {
2018-01-19 18:01:21 +08:00
columns4: [
2017-12-25 10:26:54 +08:00
{
2018-01-19 18:01:21 +08:00
type: 'selection',
width: 60,
align: 'center'
2017-12-25 10:26:54 +08:00
},
2017-10-17 10:14:10 +02:00
{
2017-11-08 14:39:39 +08:00
title: 'Name',
2017-12-25 10:26:54 +08:00
key: 'name'
2017-10-26 11:26:05 +08:00
},
{
2017-11-08 14:39:39 +08:00
title: 'Age',
2018-01-19 18:01:21 +08:00
key: 'age'
2017-10-26 11:26:05 +08:00
},
{
2017-11-08 14:39:39 +08:00
title: 'Address',
2018-01-19 17:34:02 +08:00
key: 'address'
2017-10-17 10:14:10 +02:00
}
],
2018-01-19 18:01:21 +08:00
data1: [
]
}
},
methods: {
handleSelectAll (status) {
this.$refs.selection.selectAll(status);
},
handleSetData () {
this.data1 = [
2017-11-08 16:11:04 +08:00
{
name: 'John Brown',
age: 18,
address: 'New York No. 1 Lake Park',
2017-12-25 10:26:54 +08:00
date: '2016-10-03'
2017-11-08 16:11:04 +08:00
},
{
name: 'Jim Green',
age: 24,
2017-12-25 10:26:54 +08:00
address: 'London No. 1 Lake Park',
date: '2016-10-01'
2017-11-08 16:11:04 +08:00
},
{
name: 'Joe Black',
age: 30,
address: 'Sydney No. 1 Lake Park',
2017-12-25 10:26:54 +08:00
date: '2016-10-02'
2017-11-08 16:11:04 +08:00
},
{
name: 'Jon Snow',
age: 26,
address: 'Ottawa No. 2 Lake Park',
2017-12-25 10:26:54 +08:00
date: '2016-10-04'
2017-10-17 10:14:10 +02:00
}
2018-01-19 18:01:21 +08:00
];
},
handleClearData () {
this.data1 = [];
2017-09-20 14:18:45 +08:00
}
}
2017-10-23 19:01:47 +08:00
}
2017-09-03 12:26:16 +08:00
</script>