other / mew-iview

Commit c5beedf87edf0a69d6d7561f4887cd82ea3aa532

Authored by 梁灏
1 parent d4cd421c

fixed #690

Showing 4 changed files with 322 additions and 61 deletions   Show diff stats
Inline Side-by-side
examples/routers/table.vue
  Show/Hide comments   View file @c5beedf
  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 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 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 &copy; TalkingData
  203 + </div>
  204 + </Col>
  205 + </Row>
12 206 </div>
13 207 </template>
14 208 <script>
15 209 export default {
16 210 data () {
17 211 return {
18   - loading: false,
19   - columns3: [
  212 + spanLeft: 5,
  213 + spanRight: 19,
  214 + columns1: [
20 215 {
21 216 title: '姓名',
22   - key: 'name',
23   - width: 100,
24   - fixed: 'left'
  217 + key: 'name'
25 218 },
26 219 {
27 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 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 252 data1: [
... ... @@ -91,19 +269,84 @@
91 269 name: '周小伟',
92 270 age: 26,
93 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 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
  Show/Hide comments   View file @c5beedf
... ... @@ -1339,6 +1339,11 @@
1339 1339 "integrity": "sha1-3DQxT05nkxgJP8dgJyUl+UvyXBY=",
1340 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 1347 "beeper": {
1343 1348 "version": "1.1.1",
1344 1349 "resolved": "https://registry.npmjs.org/beeper/-/beeper-1.1.1.tgz",
... ... @@ -3844,6 +3849,14 @@
3844 3849 "integrity": "sha1-WQxhFWsK4vTwJVcyoViyZrxWsh0=",
3845 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 3860 "elliptic": {
3848 3861 "version": "6.4.0",
3849 3862 "resolved": "https://registry.npmjs.org/elliptic/-/elliptic-6.4.0.tgz",
... ...
package.json
  Show/Hide comments   View file @c5beedf
... ... @@ -43,6 +43,7 @@
43 43 "async-validator": "^1.8.1",
44 44 "core-js": "^2.5.0",
45 45 "deepmerge": "^1.5.1",
  46 + "element-resize-detector": "^1.1.12",
46 47 "popper.js": "^0.6.4",
47 48 "tinycolor2": "^1.4.1"
48 49 },
... ...
src/components/table/table.vue
  Show/Hide comments   View file @c5beedf
... ... @@ -96,6 +96,7 @@
96 96 import Csv from '../../utils/csv';
97 97 import ExportCsv from './export-csv';
98 98 import Locale from '../../mixins/locale';
  99 + import elementResizeDetectorMaker from 'element-resize-detector';
99 100  
100 101 const prefixCls = 'ivu-table';
101 102  
... ... @@ -727,8 +728,11 @@
727 728 this.handleResize();
728 729 this.fixedHeader();
729 730 this.$nextTick(() => this.ready = true);
730   -// window.addEventListener('resize', this.handleResize, false);
  731 +
731 732 on(window, 'resize', this.handleResize);
  733 + this.observer = elementResizeDetectorMaker();
  734 + this.observer.listenTo(this.$el, this.handleResize);
  735 +
732 736 this.$on('on-visible-change', (val) => {
733 737 if (val) {
734 738 this.handleResize();
... ... @@ -737,8 +741,8 @@
737 741 });
738 742 },
739 743 beforeDestroy () {
740   -// window.removeEventListener('resize', this.handleResize, false);
741 744 off(window, 'resize', this.handleResize);
  745 + this.observer.removeListener(this.$el, this.handleResize);
742 746 },
743 747 watch: {
744 748 data: {
... ...