Commit 67c9b1c8b99c1ac4df8009fc191a82c1f39723c6

Authored by 梁灏
1 parent b164f7c0

fixed #591

examples/routers/table.vue
1 1 <template>
2   - <Table :columns="columns1" :data="data1">
3   - <div slot="header">头部</div>
4   - <div slot="footer">底部</div>
5   - </Table>
  2 + <div>
  3 + <Table :height="height" border :columns="columns1" :data="data2"></Table>
  4 + <Button @click="height=800">change height</Button>
  5 + </div>
6 6 </template>
7 7 <script>
8 8 export default {
9 9 data () {
10 10 return {
  11 + height: 200,
11 12 columns1: [
12 13 {
13 14 title: '姓名',
... ... @@ -22,7 +23,27 @@
22 23 key: 'address'
23 24 }
24 25 ],
25   - data1: [
  26 + data2: [
  27 + {
  28 + name: '王小明',
  29 + age: 18,
  30 + address: '北京市朝阳区芍药居'
  31 + },
  32 + {
  33 + name: '张小刚',
  34 + age: 25,
  35 + address: '北京市海淀区西二旗'
  36 + },
  37 + {
  38 + name: '李小红',
  39 + age: 30,
  40 + address: '上海市浦东新区世纪大道'
  41 + },
  42 + {
  43 + name: '周小伟',
  44 + age: 26,
  45 + address: '深圳市南山区深南大道'
  46 + },
26 47 {
27 48 name: '王小明',
28 49 age: 18,
... ...
examples/routers/tabs.vue
1 1 <template>
2   - <Row>
3   - <Col :span="12">
4   - <Tabs type="card" closable @on-tab-remove="handleTagRemove">
5   - <Tab-pane label="标签一" v-if="tab0">标签一的内容</Tab-pane>
6   - <Tab-pane label="标签二" v-if="tab1">标签二的内容</Tab-pane>
7   - <Tab-pane label="标签三" v-if="tab2">标签三的内容</Tab-pane>
8   - </Tabs>
9   - </Col>
10   - <Col :span="12">
11   - <Tabs type="card" closable @on-tab-remove="handleTagRemove">
12   - <Tab-pane :label="tab.label" v-for="tab of tabs" :key="tab">{{tab.content}}</Tab-pane>
13   - <Button size="small" slot="extra" @click="addTab">添加</Button>
14   - </Tabs>
15   - </Col>
16   - </Row>
  2 + <Tabs value="name1" :animated="false">
  3 + <Tab-pane label="标签一" name="name1">
  4 + <Table :columns="columns1" :data="data1"></Table>
  5 + </Tab-pane>
  6 + <Tab-pane label="标签二" name="name2">
  7 + <Table :columns="columns1" :data="data1"></Table>
  8 + </Tab-pane>
  9 + <Tab-pane label="标签三" name="name3">
  10 + <Table :columns="columns1" :data="data1"></Table>
  11 + </Tab-pane>
  12 + </Tabs>
17 13 </template>
18   -
19   -
20 14 <script>
21 15 export default {
22 16 data () {
23 17 return {
24   - tabs:[
25   - {label:'标签0',content:'标签内容0'},
26   - {label:'标签1',content:'标签内容1'},
27   - {label:'标签2',content:'标签内容2'},
  18 + columns1: [
  19 + {
  20 + title: '姓名',
  21 + key: 'name'
  22 + },
  23 + {
  24 + title: '年龄',
  25 + key: 'age'
  26 + },
  27 + {
  28 + title: '地址',
  29 + key: 'address'
  30 + }
28 31 ],
29   - tab0: true,
30   - tab1: true,
31   - tab2: true
32   - }
33   - },
34   - methods: {
35   - handleTagRemove (name) {
36   - this['tab' + name] = false;
37   - },
38   - addTab(){
39   - this.tabs.push({label:'标签'+this.tabs.length,content:'标签内容'+this.tabs.length});
  32 + data1: [
  33 + {
  34 + name: '王小明',
  35 + age: 18,
  36 + address: '北京市朝阳区芍药居'
  37 + },
  38 + {
  39 + name: '张小刚',
  40 + age: 25,
  41 + address: '北京市海淀区西二旗'
  42 + },
  43 + {
  44 + name: '李小红',
  45 + age: 30,
  46 + address: '上海市浦东新区世纪大道'
  47 + },
  48 + {
  49 + name: '周小伟',
  50 + age: 26,
  51 + address: '深圳市南山区深南大道'
  52 + }
  53 + ]
40 54 }
41 55 }
42 56 }
... ...
src/components/modal/modal.vue
... ... @@ -32,12 +32,13 @@
32 32 import TransferDom from '../../directives/transfer-dom';
33 33 import { getScrollBarSize } from '../../utils/assist';
34 34 import Locale from '../../mixins/locale';
  35 + import Emitter from '../../mixins/emitter';
35 36  
36 37 const prefixCls = 'ivu-modal';
37 38  
38 39 export default {
39 40 name: 'Modal',
40   - mixins: [ Locale ],
  41 + mixins: [ Locale, Emitter ],
41 42 components: { Icon, iButton },
42 43 directives: { TransferDom },
43 44 props: {
... ... @@ -247,6 +248,7 @@
247 248 this.addScrollEffect();
248 249 }
249 250 }
  251 + this.broadcast('Table', 'on-visible-change', val);
250 252 },
251 253 loading (val) {
252 254 if (!val) {
... ...
src/components/table/table.vue
... ... @@ -664,6 +664,9 @@
664 664 this.fixedHeader();
665 665 this.$nextTick(() => this.ready = true);
666 666 window.addEventListener('resize', this.handleResize, false);
  667 + this.$on('on-visible-change', (val) => {
  668 + if (val) this.handleResize();
  669 + });
667 670 },
668 671 beforeDestroy () {
669 672 window.removeEventListener('resize', this.handleResize, false);
... ...
src/components/tabs/tabs.vue
... ... @@ -23,11 +23,13 @@
23 23 <script>
24 24 import Icon from '../icon/icon.vue';
25 25 import { oneOf, getStyle } from '../../utils/assist';
  26 + import Emitter from '../../mixins/emitter';
26 27  
27 28 const prefixCls = 'ivu-tabs';
28 29  
29 30 export default {
30 31 name: 'Tabs',
  32 + mixins: [ Emitter ],
31 33 components: { Icon },
32 34 props: {
33 35 value: {
... ... @@ -226,6 +228,7 @@
226 228 activeKey () {
227 229 this.updateBar();
228 230 this.updateStatus();
  231 + this.broadcast('Table', 'on-visible-change', true);
229 232 }
230 233 },
231 234 mounted () {
... ...
src/utils/assist.js
... ... @@ -168,14 +168,14 @@ export function scrollTop(el, from = 0, to, duration = 500) {
168 168 }
169 169  
170 170 // Find components upward
171   -function findComponentUpward (content, componentName, componentNames) {
  171 +function findComponentUpward (context, componentName, componentNames) {
172 172 if (typeof componentName === 'string') {
173 173 componentNames = [componentName];
174 174 } else {
175 175 componentNames = componentName;
176 176 }
177 177  
178   - let parent = content.$parent;
  178 + let parent = context.$parent;
179 179 let name = parent.$options.name;
180 180 while (parent && (!name || componentNames.indexOf(name) < 0)) {
181 181 parent = parent.$parent;
... ... @@ -186,8 +186,8 @@ function findComponentUpward (content, componentName, componentNames) {
186 186 export {findComponentUpward};
187 187  
188 188 // Find component downward
189   -function findComponentDownward (content, componentName) {
190   - const childrens = content.$children;
  189 +function findComponentDownward (context, componentName) {
  190 + const childrens = context.$children;
191 191 let children = null;
192 192  
193 193 if (childrens.length) {
... ... @@ -215,8 +215,8 @@ function findComponentDownward (content, componentName) {
215 215 export {findComponentDownward};
216 216  
217 217 // Find components downward
218   -function findComponentsDownward (content, componentName, components = []) {
219   - const childrens = content.$children;
  218 +function findComponentsDownward (context, componentName, components = []) {
  219 + const childrens = context.$children;
220 220  
221 221 if (childrens.length) {
222 222 childrens.forEach(child => {
... ...