Commit 300bd6623e7660906862f940d10fef5ac682dc75
1 parent
4fffb066
fixed #704
Showing
3 changed files
with
71 additions
and
11 deletions
Show diff stats
examples/routers/table.vue
| 1 | <template> | 1 | <template> |
| 2 | <div> | 2 | <div> |
| 3 | - <Table highlight-row :columns="columns3" :data="data1" ref="table" @on-current-change="handleChange" @on-row-click="rc"></Table> | 3 | + <Table width="550" height="200" highlight-row :loading="loading" :columns="columns3" :data="data1" ref="table" @on-current-change="handleChange" @on-row-click="rc"> |
| 4 | + <div slot="loading"> | ||
| 5 | + <Icon type="load-c" size=18 class="demo-spin-icon-load"></Icon> | ||
| 6 | + <div>Loading</div> | ||
| 7 | + </div> | ||
| 8 | + </Table> | ||
| 9 | + <br><br> | ||
| 4 | <Button @click="handleClear">clear</Button> | 10 | <Button @click="handleClear">clear</Button> |
| 11 | + <Button @click="loading = !loading">Loading</Button> | ||
| 5 | </div> | 12 | </div> |
| 6 | </template> | 13 | </template> |
| 7 | <script> | 14 | <script> |
| 8 | export default { | 15 | export default { |
| 9 | data () { | 16 | data () { |
| 10 | return { | 17 | return { |
| 18 | + loading: false, | ||
| 11 | columns3: [ | 19 | columns3: [ |
| 12 | { | 20 | { |
| 13 | - type: 'index', | ||
| 14 | - width: 60, | ||
| 15 | - align: 'center' | ||
| 16 | - }, | ||
| 17 | - { | ||
| 18 | title: '姓名', | 21 | title: '姓名', |
| 19 | - key: 'name' | 22 | + key: 'name', |
| 23 | + width: 100, | ||
| 24 | + fixed: 'left' | ||
| 20 | }, | 25 | }, |
| 21 | { | 26 | { |
| 22 | title: '年龄', | 27 | title: '年龄', |
| 23 | key: 'age', | 28 | key: 'age', |
| 24 | - sortable: true | 29 | + width: 100 |
| 30 | + }, | ||
| 31 | + { | ||
| 32 | + title: '省份', | ||
| 33 | + key: 'province', | ||
| 34 | + width: 100 | ||
| 35 | + }, | ||
| 36 | + { | ||
| 37 | + title: '市区', | ||
| 38 | + key: 'city', | ||
| 39 | + width: 100 | ||
| 25 | }, | 40 | }, |
| 26 | { | 41 | { |
| 27 | title: '地址', | 42 | title: '地址', |
| 28 | - key: 'address' | 43 | + key: 'address', |
| 44 | + width: 200 | ||
| 45 | + }, | ||
| 46 | + { | ||
| 47 | + title: '邮编', | ||
| 48 | + key: 'zip', | ||
| 49 | + width: 100 | ||
| 50 | + }, | ||
| 51 | + { | ||
| 52 | + title: '操作', | ||
| 53 | + key: 'action', | ||
| 54 | + fixed: 'right', | ||
| 55 | + width: 120, | ||
| 56 | + render: (h, params) => { | ||
| 57 | + return h('div', [ | ||
| 58 | + h('Button', { | ||
| 59 | + props: { | ||
| 60 | + type: 'text', | ||
| 61 | + size: 'small' | ||
| 62 | + } | ||
| 63 | + }, '查看'), | ||
| 64 | + h('Button', { | ||
| 65 | + props: { | ||
| 66 | + type: 'text', | ||
| 67 | + size: 'small' | ||
| 68 | + } | ||
| 69 | + }, '编辑') | ||
| 70 | + ]); | ||
| 71 | + } | ||
| 29 | } | 72 | } |
| 30 | ], | 73 | ], |
| 31 | data1: [ | 74 | data1: [ |
src/components/table/table.vue
| @@ -82,11 +82,15 @@ | @@ -82,11 +82,15 @@ | ||
| 82 | </div> | 82 | </div> |
| 83 | <div :class="[prefixCls + '-footer']" v-if="showSlotFooter" ref="footer"><slot name="footer"></slot></div> | 83 | <div :class="[prefixCls + '-footer']" v-if="showSlotFooter" ref="footer"><slot name="footer"></slot></div> |
| 84 | </div> | 84 | </div> |
| 85 | + <Spin fix size="large" v-if="loading"> | ||
| 86 | + <slot name="loading"></slot> | ||
| 87 | + </Spin> | ||
| 85 | </div> | 88 | </div> |
| 86 | </template> | 89 | </template> |
| 87 | <script> | 90 | <script> |
| 88 | import tableHead from './table-head.vue'; | 91 | import tableHead from './table-head.vue'; |
| 89 | import tableBody from './table-body.vue'; | 92 | import tableBody from './table-body.vue'; |
| 93 | + import Spin from '../spin/spin.vue'; | ||
| 90 | import { oneOf, getStyle, deepCopy, getScrollBarSize } from '../../utils/assist'; | 94 | import { oneOf, getStyle, deepCopy, getScrollBarSize } from '../../utils/assist'; |
| 91 | import { on, off } from '../../utils/dom'; | 95 | import { on, off } from '../../utils/dom'; |
| 92 | import Csv from '../../utils/csv'; | 96 | import Csv from '../../utils/csv'; |
| @@ -101,7 +105,7 @@ | @@ -101,7 +105,7 @@ | ||
| 101 | export default { | 105 | export default { |
| 102 | name: 'Table', | 106 | name: 'Table', |
| 103 | mixins: [ Locale ], | 107 | mixins: [ Locale ], |
| 104 | - components: { tableHead, tableBody }, | 108 | + components: { tableHead, tableBody, Spin }, |
| 105 | props: { | 109 | props: { |
| 106 | data: { | 110 | data: { |
| 107 | type: Array, | 111 | type: Array, |
| @@ -159,6 +163,10 @@ | @@ -159,6 +163,10 @@ | ||
| 159 | }, | 163 | }, |
| 160 | disabledHover: { | 164 | disabledHover: { |
| 161 | type: Boolean | 165 | type: Boolean |
| 166 | + }, | ||
| 167 | + loading: { | ||
| 168 | + type: Boolean, | ||
| 169 | + default: false | ||
| 162 | } | 170 | } |
| 163 | }, | 171 | }, |
| 164 | data () { | 172 | data () { |
src/styles/components/spin.less
| @@ -31,7 +31,7 @@ | @@ -31,7 +31,7 @@ | ||
| 31 | left: 0; | 31 | left: 0; |
| 32 | z-index: @zindex-spin; | 32 | z-index: @zindex-spin; |
| 33 | .square(100%); | 33 | .square(100%); |
| 34 | - background-color: rgba(255,255,255,.95); | 34 | + background-color: rgba(255,255,255,.9); |
| 35 | } | 35 | } |
| 36 | 36 | ||
| 37 | &-fix &-main { | 37 | &-fix &-main { |
| @@ -56,6 +56,15 @@ | @@ -56,6 +56,15 @@ | ||
| 56 | } | 56 | } |
| 57 | } | 57 | } |
| 58 | 58 | ||
| 59 | +// use in Table loading, Table right border is not included in .ivu-table-wrapper, so fix it | ||
| 60 | +.@{table-prefix-cls}-wrapper{ | ||
| 61 | + > .@{spin-prefix-cls}-fix{ | ||
| 62 | + border: 1px solid @border-color-base; | ||
| 63 | + border-top: 0; | ||
| 64 | + border-left: 0; | ||
| 65 | + } | ||
| 66 | +} | ||
| 67 | + | ||
| 59 | @keyframes ani-spin-bounce { | 68 | @keyframes ani-spin-bounce { |
| 60 | 0% { | 69 | 0% { |
| 61 | transform: scale(0); | 70 | transform: scale(0); |