chenhaodong / mew-iview

Commit 300bd6623e7660906862f940d10fef5ac682dc75

Authored by 梁灏
1 parent 4fffb066

fixed #704

Showing 3 changed files with 71 additions and 11 deletions   Show diff stats
Inline Side-by-side
examples/routers/table.vue
  Show/Hide comments   View file @300bd66
1 1 <template>
2 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 10 <Button @click="handleClear">clear</Button>
  11 + <Button @click="loading = !loading">Loading</Button>
5 12 </div>
6 13 </template>
7 14 <script>
8 15 export default {
9 16 data () {
10 17 return {
  18 + loading: false,
11 19 columns3: [
12 20 {
13   - type: 'index',
14   - width: 60,
15   - align: 'center'
16   - },
17   - {
18 21 title: '姓名',
19   - key: 'name'
  22 + key: 'name',
  23 + width: 100,
  24 + fixed: 'left'
20 25 },
21 26 {
22 27 title: '年龄',
23 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 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 74 data1: [
... ...
src/components/table/table.vue
  Show/Hide comments   View file @300bd66
... ... @@ -82,11 +82,15 @@
82 82 </div>
83 83 <div :class="[prefixCls + '-footer']" v-if="showSlotFooter" ref="footer"><slot name="footer"></slot></div>
84 84 </div>
  85 + <Spin fix size="large" v-if="loading">
  86 + <slot name="loading"></slot>
  87 + </Spin>
85 88 </div>
86 89 </template>
87 90 <script>
88 91 import tableHead from './table-head.vue';
89 92 import tableBody from './table-body.vue';
  93 + import Spin from '../spin/spin.vue';
90 94 import { oneOf, getStyle, deepCopy, getScrollBarSize } from '../../utils/assist';
91 95 import { on, off } from '../../utils/dom';
92 96 import Csv from '../../utils/csv';
... ... @@ -101,7 +105,7 @@
101 105 export default {
102 106 name: 'Table',
103 107 mixins: [ Locale ],
104   - components: { tableHead, tableBody },
  108 + components: { tableHead, tableBody, Spin },
105 109 props: {
106 110 data: {
107 111 type: Array,
... ... @@ -159,6 +163,10 @@
159 163 },
160 164 disabledHover: {
161 165 type: Boolean
  166 + },
  167 + loading: {
  168 + type: Boolean,
  169 + default: false
162 170 }
163 171 },
164 172 data () {
... ...
src/styles/components/spin.less
  Show/Hide comments   View file @300bd66
... ... @@ -31,7 +31,7 @@
31 31 left: 0;
32 32 z-index: @zindex-spin;
33 33 .square(100%);
34   - background-color: rgba(255,255,255,.95);
  34 + background-color: rgba(255,255,255,.9);
35 35 }
36 36  
37 37 &-fix &-main {
... ... @@ -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 68 @keyframes ani-spin-bounce {
60 69 0% {
61 70 transform: scale(0);
... ...