Commit c5beedf87edf0a69d6d7561f4887cd82ea3aa532
1 parent
d4cd421c
fixed #690
Showing
4 changed files
with
322 additions
and
61 deletions
Show diff stats
examples/routers/table.vue
| 1 | +<!--<template>--> | ||
| 2 | + <!--<div>--> | ||
| 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>--> | ||
| 10 | + <!--<Button @click="handleClear">clear</Button>--> | ||
| 11 | + <!--<Button @click="loading = !loading">Loading</Button>--> | ||
| 12 | + <!--</div>--> | ||
| 13 | +<!--</template>--> | ||
| 14 | +<!--<script>--> | ||
| 15 | + <!--export default {--> | ||
| 16 | + <!--data () {--> | ||
| 17 | + <!--return {--> | ||
| 18 | + <!--loading: false,--> | ||
| 19 | + <!--columns3: [--> | ||
| 20 | + <!--{--> | ||
| 21 | + <!--title: '姓名',--> | ||
| 22 | + <!--key: 'name',--> | ||
| 23 | + <!--width: 100,--> | ||
| 24 | + <!--fixed: 'left'--> | ||
| 25 | + <!--},--> | ||
| 26 | + <!--{--> | ||
| 27 | + <!--title: '年龄',--> | ||
| 28 | + <!--key: 'age',--> | ||
| 29 | + <!--width: 100--> | ||
| 30 | + <!--},--> | ||
| 31 | + <!--{--> | ||
| 32 | + <!--title: '省份',--> | ||
| 33 | + <!--key: 'province',--> | ||
| 34 | + <!--width: 100--> | ||
| 35 | + <!--},--> | ||
| 36 | + <!--{--> | ||
| 37 | + <!--title: '市区',--> | ||
| 38 | + <!--key: 'city',--> | ||
| 39 | + <!--width: 100--> | ||
| 40 | + <!--},--> | ||
| 41 | + <!--{--> | ||
| 42 | + <!--title: '地址',--> | ||
| 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 | + <!--}--> | ||
| 72 | + <!--}--> | ||
| 73 | + <!--],--> | ||
| 74 | + <!--data1: [--> | ||
| 75 | + <!--{--> | ||
| 76 | + <!--name: '王小明',--> | ||
| 77 | + <!--age: 18,--> | ||
| 78 | + <!--address: '北京市朝阳区芍药居'--> | ||
| 79 | + <!--},--> | ||
| 80 | + <!--{--> | ||
| 81 | + <!--name: '张小刚',--> | ||
| 82 | + <!--age: 25,--> | ||
| 83 | + <!--address: '北京市海淀区西二旗'--> | ||
| 84 | + <!--},--> | ||
| 85 | + <!--{--> | ||
| 86 | + <!--name: '李小红',--> | ||
| 87 | + <!--age: 30,--> | ||
| 88 | + <!--address: '上海市浦东新区世纪大道'--> | ||
| 89 | + <!--},--> | ||
| 90 | + <!--{--> | ||
| 91 | + <!--name: '周小伟',--> | ||
| 92 | + <!--age: 26,--> | ||
| 93 | + <!--address: '深圳市南山区深南大道'--> | ||
| 94 | + <!--}--> | ||
| 95 | + <!--]--> | ||
| 96 | + <!--}--> | ||
| 97 | + <!--},--> | ||
| 98 | + <!--methods: {--> | ||
| 99 | + <!--handleClear () {--> | ||
| 100 | + <!--this.$refs.table.clearCurrentRow();--> | ||
| 101 | + <!--},--> | ||
| 102 | + <!--handleChange (newData, oldData) {--> | ||
| 103 | +<!--// console.log(newData, oldData)--> | ||
| 104 | + <!--},--> | ||
| 105 | + <!--rc (data, index) {--> | ||
| 106 | + <!--console.log(data, index);--> | ||
| 107 | + <!--}--> | ||
| 108 | + <!--}--> | ||
| 109 | + <!--}--> | ||
| 110 | +<!--</script>--> | ||
| 111 | + | ||
| 112 | +<style scoped> | ||
| 113 | + .layout{ | ||
| 114 | + border: 1px solid #d7dde4; | ||
| 115 | + background: #f5f7f9; | ||
| 116 | + position: relative; | ||
| 117 | + border-radius: 4px; | ||
| 118 | + overflow: hidden; | ||
| 119 | + } | ||
| 120 | + .layout-breadcrumb{ | ||
| 121 | + padding: 10px 15px 0; | ||
| 122 | + } | ||
| 123 | + .layout-content{ | ||
| 124 | + min-height: 200px; | ||
| 125 | + margin: 15px; | ||
| 126 | + overflow: hidden; | ||
| 127 | + background: #fff; | ||
| 128 | + border-radius: 4px; | ||
| 129 | + } | ||
| 130 | + .layout-content-main{ | ||
| 131 | + padding: 10px; | ||
| 132 | + } | ||
| 133 | + .layout-copy{ | ||
| 134 | + text-align: center; | ||
| 135 | + padding: 10px 0 20px; | ||
| 136 | + color: #9ea7b4; | ||
| 137 | + } | ||
| 138 | + .layout-menu-left{ | ||
| 139 | + background: #464c5b; | ||
| 140 | + } | ||
| 141 | + .layout-header{ | ||
| 142 | + height: 60px; | ||
| 143 | + background: #fff; | ||
| 144 | + box-shadow: 0 1px 1px rgba(0,0,0,.1); | ||
| 145 | + } | ||
| 146 | + .layout-logo-left{ | ||
| 147 | + width: 90%; | ||
| 148 | + height: 30px; | ||
| 149 | + background: #5b6270; | ||
| 150 | + border-radius: 3px; | ||
| 151 | + margin: 15px auto; | ||
| 152 | + } | ||
| 153 | + .layout-ceiling-main a{ | ||
| 154 | + color: #9ba7b5; | ||
| 155 | + } | ||
| 156 | + .layout-hide-text .layout-text{ | ||
| 157 | + display: none; | ||
| 158 | + } | ||
| 159 | + .ivu-col{ | ||
| 160 | + /*transition: width .2s ease-in-out;*/ | ||
| 161 | + } | ||
| 162 | +</style> | ||
| 1 | <template> | 163 | <template> |
| 2 | - <div> | ||
| 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> | 164 | + <div class="layout" :class="{'layout-hide-text': spanLeft < 5}"> |
| 165 | + <Row type="flex"> | ||
| 166 | + <Col :span="spanLeft" class="layout-menu-left"> | ||
| 167 | + <Menu active-name="1" theme="dark" width="auto"> | ||
| 168 | + <div class="layout-logo-left"></div> | ||
| 169 | + <MenuItem name="1"> | ||
| 170 | + <Icon type="ios-navigate" :size="iconSize"></Icon> | ||
| 171 | + <span class="layout-text">选项 1</span> | ||
| 172 | + </MenuItem> | ||
| 173 | + <MenuItem name="2"> | ||
| 174 | + <Icon type="ios-keypad" :size="iconSize"></Icon> | ||
| 175 | + <span class="layout-text">选项 2</span> | ||
| 176 | + </MenuItem> | ||
| 177 | + <MenuItem name="3"> | ||
| 178 | + <Icon type="ios-analytics" :size="iconSize"></Icon> | ||
| 179 | + <span class="layout-text">选项 3</span> | ||
| 180 | + </MenuItem> | ||
| 181 | + </Menu> | ||
| 182 | + </Col> | ||
| 183 | + <Col :span="spanRight"> | ||
| 184 | + <div class="layout-header"> | ||
| 185 | + <Button type="text" @click="toggleClick"> | ||
| 186 | + <Icon type="navicon" size="32"></Icon> | ||
| 187 | + </Button> | ||
| 188 | + </div> | ||
| 189 | + <div class="layout-breadcrumb"> | ||
| 190 | + <Breadcrumb> | ||
| 191 | + <BreadcrumbItem href="#">首页</BreadcrumbItem> | ||
| 192 | + <BreadcrumbItem href="#">应用中心</BreadcrumbItem> | ||
| 193 | + <BreadcrumbItem>某应用</BreadcrumbItem> | ||
| 194 | + </Breadcrumb> | ||
| 7 | </div> | 195 | </div> |
| 8 | - </Table> | ||
| 9 | - <br><br> | ||
| 10 | - <Button @click="handleClear">clear</Button> | ||
| 11 | - <Button @click="loading = !loading">Loading</Button> | 196 | + <div class="layout-content"> |
| 197 | + <div class="layout-content-main"> | ||
| 198 | + <Table :columns="columns1" :data="data1"></Table> | ||
| 199 | + </div> | ||
| 200 | + </div> | ||
| 201 | + <div class="layout-copy"> | ||
| 202 | + 2011-2016 © TalkingData | ||
| 203 | + </div> | ||
| 204 | + </Col> | ||
| 205 | + </Row> | ||
| 12 | </div> | 206 | </div> |
| 13 | </template> | 207 | </template> |
| 14 | <script> | 208 | <script> |
| 15 | export default { | 209 | export default { |
| 16 | data () { | 210 | data () { |
| 17 | return { | 211 | return { |
| 18 | - loading: false, | ||
| 19 | - columns3: [ | 212 | + spanLeft: 5, |
| 213 | + spanRight: 19, | ||
| 214 | + columns1: [ | ||
| 20 | { | 215 | { |
| 21 | title: '姓名', | 216 | title: '姓名', |
| 22 | - key: 'name', | ||
| 23 | - width: 100, | ||
| 24 | - fixed: 'left' | 217 | + key: 'name' |
| 25 | }, | 218 | }, |
| 26 | { | 219 | { |
| 27 | title: '年龄', | 220 | title: '年龄', |
| 28 | - key: 'age', | ||
| 29 | - width: 100 | 221 | + key: 'age' |
| 30 | }, | 222 | }, |
| 31 | { | 223 | { |
| 32 | - title: '省份', | ||
| 33 | - key: 'province', | ||
| 34 | - width: 100 | 224 | + title: '地址', |
| 225 | + key: 'address' | ||
| 35 | }, | 226 | }, |
| 36 | { | 227 | { |
| 37 | - title: '市区', | ||
| 38 | - key: 'city', | ||
| 39 | - width: 100 | 228 | + title: '姓名', |
| 229 | + key: 'name' | ||
| 230 | + }, | ||
| 231 | + { | ||
| 232 | + title: '年龄', | ||
| 233 | + key: 'age' | ||
| 40 | }, | 234 | }, |
| 41 | { | 235 | { |
| 42 | title: '地址', | 236 | title: '地址', |
| 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 | - } | 237 | + key: 'address' |
| 238 | + }, | ||
| 239 | + { | ||
| 240 | + title: '姓名', | ||
| 241 | + key: 'name' | ||
| 242 | + }, | ||
| 243 | + { | ||
| 244 | + title: '年龄', | ||
| 245 | + key: 'age' | ||
| 246 | + }, | ||
| 247 | + { | ||
| 248 | + title: '地址', | ||
| 249 | + key: 'address' | ||
| 72 | } | 250 | } |
| 73 | ], | 251 | ], |
| 74 | data1: [ | 252 | data1: [ |
| @@ -91,19 +269,84 @@ | @@ -91,19 +269,84 @@ | ||
| 91 | name: '周小伟', | 269 | name: '周小伟', |
| 92 | age: 26, | 270 | age: 26, |
| 93 | address: '深圳市南山区深南大道' | 271 | address: '深圳市南山区深南大道' |
| 272 | + }, | ||
| 273 | + { | ||
| 274 | + name: '王小明', | ||
| 275 | + age: 18, | ||
| 276 | + address: '北京市朝阳区芍药居' | ||
| 277 | + }, | ||
| 278 | + { | ||
| 279 | + name: '张小刚', | ||
| 280 | + age: 25, | ||
| 281 | + address: '北京市海淀区西二旗' | ||
| 282 | + }, | ||
| 283 | + { | ||
| 284 | + name: '李小红', | ||
| 285 | + age: 30, | ||
| 286 | + address: '上海市浦东新区世纪大道' | ||
| 287 | + }, | ||
| 288 | + { | ||
| 289 | + name: '周小伟', | ||
| 290 | + age: 26, | ||
| 291 | + address: '深圳市南山区深南大道' | ||
| 292 | + }, | ||
| 293 | + { | ||
| 294 | + name: '王小明', | ||
| 295 | + age: 18, | ||
| 296 | + address: '北京市朝阳区芍药居' | ||
| 297 | + }, | ||
| 298 | + { | ||
| 299 | + name: '张小刚', | ||
| 300 | + age: 25, | ||
| 301 | + address: '北京市海淀区西二旗' | ||
| 302 | + }, | ||
| 303 | + { | ||
| 304 | + name: '李小红', | ||
| 305 | + age: 30, | ||
| 306 | + address: '上海市浦东新区世纪大道' | ||
| 307 | + }, | ||
| 308 | + { | ||
| 309 | + name: '周小伟', | ||
| 310 | + age: 26, | ||
| 311 | + address: '深圳市南山区深南大道' | ||
| 312 | + }, | ||
| 313 | + { | ||
| 314 | + name: '王小明', | ||
| 315 | + age: 18, | ||
| 316 | + address: '北京市朝阳区芍药居' | ||
| 317 | + }, | ||
| 318 | + { | ||
| 319 | + name: '张小刚', | ||
| 320 | + age: 25, | ||
| 321 | + address: '北京市海淀区西二旗' | ||
| 322 | + }, | ||
| 323 | + { | ||
| 324 | + name: '李小红', | ||
| 325 | + age: 30, | ||
| 326 | + address: '上海市浦东新区世纪大道' | ||
| 327 | + }, | ||
| 328 | + { | ||
| 329 | + name: '周小伟', | ||
| 330 | + age: 26, | ||
| 331 | + address: '深圳市南山区深南大道' | ||
| 94 | } | 332 | } |
| 95 | ] | 333 | ] |
| 96 | } | 334 | } |
| 97 | }, | 335 | }, |
| 336 | + computed: { | ||
| 337 | + iconSize () { | ||
| 338 | + return this.spanLeft === 5 ? 14 : 24; | ||
| 339 | + } | ||
| 340 | + }, | ||
| 98 | methods: { | 341 | methods: { |
| 99 | - handleClear () { | ||
| 100 | - this.$refs.table.clearCurrentRow(); | ||
| 101 | - }, | ||
| 102 | - handleChange (newData, oldData) { | ||
| 103 | -// console.log(newData, oldData) | ||
| 104 | - }, | ||
| 105 | - rc (data, index) { | ||
| 106 | - console.log(data, index); | 342 | + toggleClick () { |
| 343 | + if (this.spanLeft === 5) { | ||
| 344 | + this.spanLeft = 2; | ||
| 345 | + this.spanRight = 22; | ||
| 346 | + } else { | ||
| 347 | + this.spanLeft = 5; | ||
| 348 | + this.spanRight = 19; | ||
| 349 | + } | ||
| 107 | } | 350 | } |
| 108 | } | 351 | } |
| 109 | } | 352 | } |
package-lock.json
| @@ -1339,6 +1339,11 @@ | @@ -1339,6 +1339,11 @@ | ||
| 1339 | "integrity": "sha1-3DQxT05nkxgJP8dgJyUl+UvyXBY=", | 1339 | "integrity": "sha1-3DQxT05nkxgJP8dgJyUl+UvyXBY=", |
| 1340 | "dev": true | 1340 | "dev": true |
| 1341 | }, | 1341 | }, |
| 1342 | + "batch-processor": { | ||
| 1343 | + "version": "1.0.0", | ||
| 1344 | + "resolved": "https://registry.npmjs.org/batch-processor/-/batch-processor-1.0.0.tgz", | ||
| 1345 | + "integrity": "sha1-dclcMrdI4IUNEMKxaPa9vpiRrOg=" | ||
| 1346 | + }, | ||
| 1342 | "beeper": { | 1347 | "beeper": { |
| 1343 | "version": "1.1.1", | 1348 | "version": "1.1.1", |
| 1344 | "resolved": "https://registry.npmjs.org/beeper/-/beeper-1.1.1.tgz", | 1349 | "resolved": "https://registry.npmjs.org/beeper/-/beeper-1.1.1.tgz", |
| @@ -3844,6 +3849,14 @@ | @@ -3844,6 +3849,14 @@ | ||
| 3844 | "integrity": "sha1-WQxhFWsK4vTwJVcyoViyZrxWsh0=", | 3849 | "integrity": "sha1-WQxhFWsK4vTwJVcyoViyZrxWsh0=", |
| 3845 | "dev": true | 3850 | "dev": true |
| 3846 | }, | 3851 | }, |
| 3852 | + "element-resize-detector": { | ||
| 3853 | + "version": "1.1.12", | ||
| 3854 | + "resolved": "https://registry.npmjs.org/element-resize-detector/-/element-resize-detector-1.1.12.tgz", | ||
| 3855 | + "integrity": "sha1-iz/W7t2hf5wAs2Cg6i35knroC6I=", | ||
| 3856 | + "requires": { | ||
| 3857 | + "batch-processor": "1.0.0" | ||
| 3858 | + } | ||
| 3859 | + }, | ||
| 3847 | "elliptic": { | 3860 | "elliptic": { |
| 3848 | "version": "6.4.0", | 3861 | "version": "6.4.0", |
| 3849 | "resolved": "https://registry.npmjs.org/elliptic/-/elliptic-6.4.0.tgz", | 3862 | "resolved": "https://registry.npmjs.org/elliptic/-/elliptic-6.4.0.tgz", |
package.json
| @@ -43,6 +43,7 @@ | @@ -43,6 +43,7 @@ | ||
| 43 | "async-validator": "^1.8.1", | 43 | "async-validator": "^1.8.1", |
| 44 | "core-js": "^2.5.0", | 44 | "core-js": "^2.5.0", |
| 45 | "deepmerge": "^1.5.1", | 45 | "deepmerge": "^1.5.1", |
| 46 | + "element-resize-detector": "^1.1.12", | ||
| 46 | "popper.js": "^0.6.4", | 47 | "popper.js": "^0.6.4", |
| 47 | "tinycolor2": "^1.4.1" | 48 | "tinycolor2": "^1.4.1" |
| 48 | }, | 49 | }, |
src/components/table/table.vue
| @@ -96,6 +96,7 @@ | @@ -96,6 +96,7 @@ | ||
| 96 | import Csv from '../../utils/csv'; | 96 | import Csv from '../../utils/csv'; |
| 97 | import ExportCsv from './export-csv'; | 97 | import ExportCsv from './export-csv'; |
| 98 | import Locale from '../../mixins/locale'; | 98 | import Locale from '../../mixins/locale'; |
| 99 | + import elementResizeDetectorMaker from 'element-resize-detector'; | ||
| 99 | 100 | ||
| 100 | const prefixCls = 'ivu-table'; | 101 | const prefixCls = 'ivu-table'; |
| 101 | 102 | ||
| @@ -727,8 +728,11 @@ | @@ -727,8 +728,11 @@ | ||
| 727 | this.handleResize(); | 728 | this.handleResize(); |
| 728 | this.fixedHeader(); | 729 | this.fixedHeader(); |
| 729 | this.$nextTick(() => this.ready = true); | 730 | this.$nextTick(() => this.ready = true); |
| 730 | -// window.addEventListener('resize', this.handleResize, false); | 731 | + |
| 731 | on(window, 'resize', this.handleResize); | 732 | on(window, 'resize', this.handleResize); |
| 733 | + this.observer = elementResizeDetectorMaker(); | ||
| 734 | + this.observer.listenTo(this.$el, this.handleResize); | ||
| 735 | + | ||
| 732 | this.$on('on-visible-change', (val) => { | 736 | this.$on('on-visible-change', (val) => { |
| 733 | if (val) { | 737 | if (val) { |
| 734 | this.handleResize(); | 738 | this.handleResize(); |
| @@ -737,8 +741,8 @@ | @@ -737,8 +741,8 @@ | ||
| 737 | }); | 741 | }); |
| 738 | }, | 742 | }, |
| 739 | beforeDestroy () { | 743 | beforeDestroy () { |
| 740 | -// window.removeEventListener('resize', this.handleResize, false); | ||
| 741 | off(window, 'resize', this.handleResize); | 744 | off(window, 'resize', this.handleResize); |
| 745 | + this.observer.removeListener(this.$el, this.handleResize); | ||
| 742 | }, | 746 | }, |
| 743 | watch: { | 747 | watch: { |
| 744 | data: { | 748 | data: { |