diff --git a/examples/routers/table.vue b/examples/routers/table.vue index 0dd18b2..db2c158 100644 --- a/examples/routers/table.vue +++ b/examples/routers/table.vue @@ -1,117 +1,21 @@ -<!--<template>--> - <!--<Table border :columns="columns6" :data="data5"></Table>--> -<!--</template>--> -<!--<script>--> - <!--export default {--> - <!--data () {--> - <!--return {--> - <!--columns6: [--> - <!--{--> - <!--title: 'Date',--> - <!--key: 'date'--> - <!--},--> - <!--{--> - <!--title: 'Name',--> - <!--key: 'name'--> - <!--},--> - <!--{--> - <!--title: 'Gender',--> - <!--key: 'gender'--> - <!--},--> - <!--{--> - <!--title: 'Age',--> - <!--key: 'age',--> - <!--fixed: 'left',--> -<!--// fixed: 'right',--> - <!--filters: [--> - <!--{--> - <!--label: 'Greater than 25',--> - <!--value: 1--> - <!--},--> - <!--{--> - <!--label: 'Less than 25',--> - <!--value: 2--> - <!--}--> - <!--],--> - <!--filterMultiple: false,--> - <!--filterMethod (value, row) {--> - <!--if (value === 1) {--> - <!--return row.age > 25;--> - <!--} else if (value === 2) {--> - <!--return row.age < 25;--> - <!--}--> - <!--}--> - <!--},--> - <!--{--> - <!--title: 'Address',--> - <!--key: 'address',--> - <!--fixed: 'left',--> - <!--filters: [--> - <!--{--> - <!--label: 'New York',--> - <!--value: 'New York'--> - <!--},--> - <!--{--> - <!--label: 'London',--> - <!--value: 'London'--> - <!--},--> - <!--{--> - <!--label: 'Sydney',--> - <!--value: 'Sydney'--> - <!--}--> - <!--],--> - <!--filterMethod (value, row) {--> - <!--return row.address.indexOf(value) > -1;--> - <!--}--> - <!--}--> - <!--],--> - <!--data5: [--> - <!--{--> - <!--name: 'John Brown',--> - <!--age: 18,--> - <!--gender: 'male',--> - <!--address: 'New York No. 1 Lake Park',--> - <!--date: '2016-10-03'--> - <!--},--> - <!--{--> - <!--name: 'Jim Green',--> - <!--age: 24,--> - <!--gender: 'female',--> - <!--address: 'London No. 1 Lake Park',--> - <!--date: '2016-10-01'--> - <!--},--> - <!--{--> - <!--name: 'Joe Black',--> - <!--age: 30,--> - <!--gender: 'male',--> - <!--address: 'Sydney No. 1 Lake Park',--> - <!--date: '2016-10-02'--> - <!--},--> - <!--{--> - <!--name: 'Jon Snow',--> - <!--age: 26,--> - <!--gender: 'male',--> - <!--address: 'Ottawa No. 2 Lake Park',--> - <!--date: '2016-10-04'--> - <!--}--> - <!--],--> - <!--}--> - <!--}--> - <!--}--> -<!--</script>--> - <template> - <Table border :columns="columns5" :data="data5"></Table> + <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 { - columns5: [ + columns4: [ { - title: 'Date', - key: 'date', - sortable: true + type: 'selection', + width: 60, + align: 'center' }, { title: 'Name', @@ -119,16 +23,24 @@ }, { title: 'Age', - key: 'age', - fixed: 'right', - sortable: true + key: 'age' }, { title: 'Address', key: 'address' } ], - data5: [ + data1: [ + + ] + } + }, + methods: { + handleSelectAll (status) { + this.$refs.selection.selectAll(status); + }, + handleSetData () { + this.data1 = [ { name: 'John Brown', age: 18, @@ -153,7 +65,10 @@ address: 'Ottawa No. 2 Lake Park', date: '2016-10-04' } - ] + ]; + }, + handleClearData () { + this.data1 = []; } } } diff --git a/src/components/table/table-head.vue b/src/components/table/table-head.vue index b126a19..5bca78e 100644 --- a/src/components/table/table-head.vue +++ b/src/components/table/table-head.vue @@ -11,7 +11,7 @@ <span v-if="!column.renderHeader">{{ column.title || '' }}</span> <render-header v-else :render="column.renderHeader" :column="column" :index="index"></render-header> </template> - <template v-else-if="column.type === 'selection'"><Checkbox :value="isSelectAll" @on-change="selectAll"></Checkbox></template> + <template v-else-if="column.type === 'selection'"><Checkbox :value="isSelectAll" :disabled="!data.length" @on-change="selectAll"></Checkbox></template> <template v-else> <span v-if="!column.renderHeader" @click="handleSortByHead(index)">{{ column.title || '#' }}</span> <render-header v-else :render="column.renderHeader" :column="column" :index="index"></render-header> -- libgit2 0.21.4