Commit bb49347b35e6046356c7dc190994659330a0cf60
1 parent
b34e09b8
fixed #2823
Showing
2 changed files
with
28 additions
and
113 deletions
Show diff stats
examples/routers/table.vue
| 1 | -<!--<template>--> | ||
| 2 | - <!--<Table border :columns="columns6" :data="data5"></Table>--> | ||
| 3 | -<!--</template>--> | ||
| 4 | -<!--<script>--> | ||
| 5 | - <!--export default {--> | ||
| 6 | - <!--data () {--> | ||
| 7 | - <!--return {--> | ||
| 8 | - <!--columns6: [--> | ||
| 9 | - <!--{--> | ||
| 10 | - <!--title: 'Date',--> | ||
| 11 | - <!--key: 'date'--> | ||
| 12 | - <!--},--> | ||
| 13 | - <!--{--> | ||
| 14 | - <!--title: 'Name',--> | ||
| 15 | - <!--key: 'name'--> | ||
| 16 | - <!--},--> | ||
| 17 | - <!--{--> | ||
| 18 | - <!--title: 'Gender',--> | ||
| 19 | - <!--key: 'gender'--> | ||
| 20 | - <!--},--> | ||
| 21 | - <!--{--> | ||
| 22 | - <!--title: 'Age',--> | ||
| 23 | - <!--key: 'age',--> | ||
| 24 | - <!--fixed: 'left',--> | ||
| 25 | -<!--// fixed: 'right',--> | ||
| 26 | - <!--filters: [--> | ||
| 27 | - <!--{--> | ||
| 28 | - <!--label: 'Greater than 25',--> | ||
| 29 | - <!--value: 1--> | ||
| 30 | - <!--},--> | ||
| 31 | - <!--{--> | ||
| 32 | - <!--label: 'Less than 25',--> | ||
| 33 | - <!--value: 2--> | ||
| 34 | - <!--}--> | ||
| 35 | - <!--],--> | ||
| 36 | - <!--filterMultiple: false,--> | ||
| 37 | - <!--filterMethod (value, row) {--> | ||
| 38 | - <!--if (value === 1) {--> | ||
| 39 | - <!--return row.age > 25;--> | ||
| 40 | - <!--} else if (value === 2) {--> | ||
| 41 | - <!--return row.age < 25;--> | ||
| 42 | - <!--}--> | ||
| 43 | - <!--}--> | ||
| 44 | - <!--},--> | ||
| 45 | - <!--{--> | ||
| 46 | - <!--title: 'Address',--> | ||
| 47 | - <!--key: 'address',--> | ||
| 48 | - <!--fixed: 'left',--> | ||
| 49 | - <!--filters: [--> | ||
| 50 | - <!--{--> | ||
| 51 | - <!--label: 'New York',--> | ||
| 52 | - <!--value: 'New York'--> | ||
| 53 | - <!--},--> | ||
| 54 | - <!--{--> | ||
| 55 | - <!--label: 'London',--> | ||
| 56 | - <!--value: 'London'--> | ||
| 57 | - <!--},--> | ||
| 58 | - <!--{--> | ||
| 59 | - <!--label: 'Sydney',--> | ||
| 60 | - <!--value: 'Sydney'--> | ||
| 61 | - <!--}--> | ||
| 62 | - <!--],--> | ||
| 63 | - <!--filterMethod (value, row) {--> | ||
| 64 | - <!--return row.address.indexOf(value) > -1;--> | ||
| 65 | - <!--}--> | ||
| 66 | - <!--}--> | ||
| 67 | - <!--],--> | ||
| 68 | - <!--data5: [--> | ||
| 69 | - <!--{--> | ||
| 70 | - <!--name: 'John Brown',--> | ||
| 71 | - <!--age: 18,--> | ||
| 72 | - <!--gender: 'male',--> | ||
| 73 | - <!--address: 'New York No. 1 Lake Park',--> | ||
| 74 | - <!--date: '2016-10-03'--> | ||
| 75 | - <!--},--> | ||
| 76 | - <!--{--> | ||
| 77 | - <!--name: 'Jim Green',--> | ||
| 78 | - <!--age: 24,--> | ||
| 79 | - <!--gender: 'female',--> | ||
| 80 | - <!--address: 'London No. 1 Lake Park',--> | ||
| 81 | - <!--date: '2016-10-01'--> | ||
| 82 | - <!--},--> | ||
| 83 | - <!--{--> | ||
| 84 | - <!--name: 'Joe Black',--> | ||
| 85 | - <!--age: 30,--> | ||
| 86 | - <!--gender: 'male',--> | ||
| 87 | - <!--address: 'Sydney No. 1 Lake Park',--> | ||
| 88 | - <!--date: '2016-10-02'--> | ||
| 89 | - <!--},--> | ||
| 90 | - <!--{--> | ||
| 91 | - <!--name: 'Jon Snow',--> | ||
| 92 | - <!--age: 26,--> | ||
| 93 | - <!--gender: 'male',--> | ||
| 94 | - <!--address: 'Ottawa No. 2 Lake Park',--> | ||
| 95 | - <!--date: '2016-10-04'--> | ||
| 96 | - <!--}--> | ||
| 97 | - <!--],--> | ||
| 98 | - <!--}--> | ||
| 99 | - <!--}--> | ||
| 100 | - <!--}--> | ||
| 101 | -<!--</script>--> | ||
| 102 | - | ||
| 103 | <template> | 1 | <template> |
| 104 | - <Table border :columns="columns5" :data="data5"></Table> | 2 | + <div> |
| 3 | + <Table border ref="selection" :columns="columns4" :data="data1"></Table> | ||
| 4 | + <Button @click="handleSetData">Set Data</Button> | ||
| 5 | + <Button @click="handleClearData">Clear Data</Button> | ||
| 6 | + <Button @click="handleSelectAll(true)">Set all selected</Button> | ||
| 7 | + <Button @click="handleSelectAll(false)">Cancel all selected</Button> | ||
| 8 | + </div> | ||
| 105 | </template> | 9 | </template> |
| 106 | <script> | 10 | <script> |
| 107 | export default { | 11 | export default { |
| 108 | data () { | 12 | data () { |
| 109 | return { | 13 | return { |
| 110 | - columns5: [ | 14 | + columns4: [ |
| 111 | { | 15 | { |
| 112 | - title: 'Date', | ||
| 113 | - key: 'date', | ||
| 114 | - sortable: true | 16 | + type: 'selection', |
| 17 | + width: 60, | ||
| 18 | + align: 'center' | ||
| 115 | }, | 19 | }, |
| 116 | { | 20 | { |
| 117 | title: 'Name', | 21 | title: 'Name', |
| @@ -119,16 +23,24 @@ | @@ -119,16 +23,24 @@ | ||
| 119 | }, | 23 | }, |
| 120 | { | 24 | { |
| 121 | title: 'Age', | 25 | title: 'Age', |
| 122 | - key: 'age', | ||
| 123 | - fixed: 'right', | ||
| 124 | - sortable: true | 26 | + key: 'age' |
| 125 | }, | 27 | }, |
| 126 | { | 28 | { |
| 127 | title: 'Address', | 29 | title: 'Address', |
| 128 | key: 'address' | 30 | key: 'address' |
| 129 | } | 31 | } |
| 130 | ], | 32 | ], |
| 131 | - data5: [ | 33 | + data1: [ |
| 34 | + | ||
| 35 | + ] | ||
| 36 | + } | ||
| 37 | + }, | ||
| 38 | + methods: { | ||
| 39 | + handleSelectAll (status) { | ||
| 40 | + this.$refs.selection.selectAll(status); | ||
| 41 | + }, | ||
| 42 | + handleSetData () { | ||
| 43 | + this.data1 = [ | ||
| 132 | { | 44 | { |
| 133 | name: 'John Brown', | 45 | name: 'John Brown', |
| 134 | age: 18, | 46 | age: 18, |
| @@ -153,7 +65,10 @@ | @@ -153,7 +65,10 @@ | ||
| 153 | address: 'Ottawa No. 2 Lake Park', | 65 | address: 'Ottawa No. 2 Lake Park', |
| 154 | date: '2016-10-04' | 66 | date: '2016-10-04' |
| 155 | } | 67 | } |
| 156 | - ] | 68 | + ]; |
| 69 | + }, | ||
| 70 | + handleClearData () { | ||
| 71 | + this.data1 = []; | ||
| 157 | } | 72 | } |
| 158 | } | 73 | } |
| 159 | } | 74 | } |
src/components/table/table-head.vue
| @@ -11,7 +11,7 @@ | @@ -11,7 +11,7 @@ | ||
| 11 | <span v-if="!column.renderHeader">{{ column.title || '' }}</span> | 11 | <span v-if="!column.renderHeader">{{ column.title || '' }}</span> |
| 12 | <render-header v-else :render="column.renderHeader" :column="column" :index="index"></render-header> | 12 | <render-header v-else :render="column.renderHeader" :column="column" :index="index"></render-header> |
| 13 | </template> | 13 | </template> |
| 14 | - <template v-else-if="column.type === 'selection'"><Checkbox :value="isSelectAll" @on-change="selectAll"></Checkbox></template> | 14 | + <template v-else-if="column.type === 'selection'"><Checkbox :value="isSelectAll" :disabled="!data.length" @on-change="selectAll"></Checkbox></template> |
| 15 | <template v-else> | 15 | <template v-else> |
| 16 | <span v-if="!column.renderHeader" @click="handleSortByHead(index)">{{ column.title || '#' }}</span> | 16 | <span v-if="!column.renderHeader" @click="handleSortByHead(index)">{{ column.title || '#' }}</span> |
| 17 | <render-header v-else :render="column.renderHeader" :column="column" :index="index"></render-header> | 17 | <render-header v-else :render="column.renderHeader" :column="column" :index="index"></render-header> |