Commit 67c9b1c8b99c1ac4df8009fc191a82c1f39723c6
1 parent
b164f7c0
fixed #591
Showing
6 changed files
with
87 additions
and
44 deletions
Show diff stats
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 => { | ... | ... |