chenhaodong / mew-iview

Commit d16dce64d6cd0285b0103f654147b06e38ead030

Authored by 梁灏
1 parent 8f5b1686

fixed #193 

It takes me least 4 hours.😢
Showing 2 changed files with 222 additions and 59 deletions   Show diff stats
Inline Side-by-side
src/components/table/table.vue
  Show/Hide comments   View file @d16dce6
@@ -169,6 +169,7 @@ @@ -169,6 +169,7 @@
169 showSlotHeader: true, 169 showSlotHeader: true,
170 showSlotFooter: true, 170 showSlotFooter: true,
171 bodyHeight: 0, 171 bodyHeight: 0,
  172 + bodyRealHeight: 0,
172 scrollBarWidth: getScrollBarSize() 173 scrollBarWidth: getScrollBarSize()
173 }; 174 };
174 }, 175 },
@@ -206,7 +207,17 @@ @@ -206,7 +207,17 @@
206 tableStyle () { 207 tableStyle () {
207 let style = {}; 208 let style = {};
208 if (this.tableWidth !== 0) { 209 if (this.tableWidth !== 0) {
209 - const width = this.bodyHeight === 0 ? this.tableWidth : this.tableWidth - this.scrollBarWidth; 210 + let width = '';
  211 + if (this.bodyHeight === 0) {
  212 + width = this.tableWidth;
  213 + } else {
  214 + if (this.bodyHeight > this.bodyRealHeight) {
  215 + width = this.tableWidth;
  216 + } else {
  217 + width = this.tableWidth - this.scrollBarWidth;
  218 + }
  219 + }
  220 +// const width = this.bodyHeight === 0 ? this.tableWidth : this.tableWidth - this.scrollBarWidth;
210 style.width = `${width}px`; 221 style.width = `${width}px`;
211 } 222 }
212 return style; 223 return style;
@@ -242,7 +253,13 @@ @@ -242,7 +253,13 @@
242 fixedBodyStyle () { 253 fixedBodyStyle () {
243 let style = {}; 254 let style = {};
244 if (this.bodyHeight !== 0) { 255 if (this.bodyHeight !== 0) {
245 - style.height = this.scrollBarWidth > 0 ? `${this.bodyHeight}px` : `${this.bodyHeight - 1}px`; 256 + let height = this.bodyHeight + this.scrollBarWidth - 1;
  257 +
  258 + if (this.width && this.width < this.tableWidth){
  259 + height = this.bodyHeight;
  260 + }
  261 +// style.height = this.scrollBarWidth > 0 ? `${this.bodyHeight}px` : `${this.bodyHeight - 1}px`;
  262 + style.height = this.scrollBarWidth > 0 ? `${height}px` : `${height - 1}px`;
246 } 263 }
247 return style; 264 return style;
248 }, 265 },
@@ -315,6 +332,8 @@ @@ -315,6 +332,8 @@
315 this.columnsWidth = columnsWidth; 332 this.columnsWidth = columnsWidth;
316 } 333 }
317 }); 334 });
  335 + // get table real height,for fixed when set height prop,but height < table's height,show scrollBarWidth
  336 + this.bodyRealHeight = parseInt(getStyle(this.$refs.tbody.$el, 'height'));
318 }); 337 });
319 }, 338 },
320 handleMouseIn (_index) { 339 handleMouseIn (_index) {
test/routers/table.vue
  Show/Hide comments   View file @d16dce6
1 <template> 1 <template>
2 - <!--<i-select :model.sync="model1" style="width:200px">-->  
3 - <!--<i-option v-for="item in cityList" :value="item.value">{{ item.label }}</i-option>-->  
4 - <!--</i-select>-->  
5 - <i-button @click="data7 = data6">Dispatch</i-button>  
6 - <br/>  
7 - <i-table border :content="self" :columns="columns7" :data="data7"></i-table>  
8 - <br/>  
9 - <i-table border :content="self" :columns="columns7" :data="data7" size="small"></i-table>  
10 - <br/>  
11 - <i-table border :content="self" :columns="columns7" :data="data7" size="large"></i-table>  
12 - <br/>  
13 - <i-table border :content="self" :columns="columns7" :data="data7" height="600"></i-table> 2 + <div style="width: 800px">
  3 + <i-table width="550" height="200" border :columns="columns5" :data="data4"></i-table>
  4 + <br>
  5 + <i-table border height="300" :columns="columns1" :data="data1"></i-table>
  6 + <br>
  7 + <i-table border height="300" :columns="columns1" :data="data2"></i-table>
  8 + <br>
  9 + <i-table border height="300" :columns="columns2" :data="data1"></i-table>
  10 + <br>
  11 + <i-table border height="300" :columns="columns3" :data="data1"></i-table>
  12 + </div>
14 </template> 13 </template>
15 <script> 14 <script>
16 export default { 15 export default {
17 data () { 16 data () {
18 return { 17 return {
19 - cityList: [ 18 + columns1: [
20 { 19 {
21 - value: 'beijing',  
22 - label: '北京市' 20 + title: '姓名',
  21 + key: 'name'
23 }, 22 },
24 { 23 {
25 - value: 'shanghai',  
26 - label: '上海市' 24 + title: '年龄',
  25 + key: 'age'
27 }, 26 },
28 { 27 {
29 - value: 'shenzhen',  
30 - label: '深圳市'  
31 - }, 28 + title: '地址',
  29 + key: 'address'
  30 + }
  31 + ],
  32 + columns2: [
32 { 33 {
33 - value: 'hangzhou',  
34 - label: '杭州市' 34 + title: '姓名',
  35 + key: 'name'
35 }, 36 },
36 { 37 {
37 - value: 'nanjing',  
38 - label: '南京市' 38 + title: '年龄',
  39 + key: 'age',
  40 + fixed: 'left'
39 }, 41 },
40 { 42 {
41 - value: 'chongqing',  
42 - label: '重庆市' 43 + title: '地址',
  44 + key: 'address'
43 } 45 }
44 ], 46 ],
45 - model1: 'shanghai',  
46 - self: this,  
47 - columns7: [ 47 + columns3: [
48 { 48 {
49 title: '姓名', 49 title: '姓名',
50 - key: 'name',  
51 - render (row, column, index) {  
52 - return `<Icon type="person"></Icon> <strong>${row.name}</strong>`;  
53 - } 50 + key: 'name'
54 }, 51 },
55 { 52 {
56 title: '年龄', 53 title: '年龄',
57 - key: 'age' 54 + key: 'age',
  55 + fixed: 'right'
58 }, 56 },
59 { 57 {
60 title: '地址', 58 title: '地址',
61 key: 'address' 59 key: 'address'
  60 + }
  61 + ],
  62 + data1: [
  63 + {
  64 + name: '王小明',
  65 + age: 18,
  66 + address: '北京市朝阳区芍药居'
62 }, 67 },
63 { 68 {
64 - title: '操作',  
65 - key: 'action',  
66 - align: 'center',  
67 - render (row, column, index) {  
68 - return `  
69 -<i-select :model.sync="model1" style="width:200px">  
70 - <i-option v-for="item in cityList" :value="item.value">{{ item.label }}</i-option>  
71 - </i-select><br><br><br>  
72 -`;  
73 - } 69 + name: '张小刚',
  70 + age: 25,
  71 + address: '北京市海淀区西二旗'
  72 + },
  73 + {
  74 + name: '李小红',
  75 + age: 30,
  76 + address: '上海市浦东新区世纪大道'
  77 + },
  78 + {
  79 + name: '周小伟',
  80 + age: 26,
  81 + address: '深圳市南山区深南大道'
  82 + },
  83 + {
  84 + name: '王小明',
  85 + age: 18,
  86 + address: '北京市朝阳区芍药居'
  87 + },
  88 + {
  89 + name: '张小刚',
  90 + age: 25,
  91 + address: '北京市海淀区西二旗'
  92 + },
  93 + {
  94 + name: '李小红',
  95 + age: 30,
  96 + address: '上海市浦东新区世纪大道'
  97 + },
  98 + {
  99 + name: '周小伟',
  100 + age: 26,
  101 + address: '深圳市南山区深南大道'
  102 + },
  103 + {
  104 + name: '王小明',
  105 + age: 18,
  106 + address: '北京市朝阳区芍药居'
  107 + },
  108 + {
  109 + name: '张小刚',
  110 + age: 25,
  111 + address: '北京市海淀区西二旗'
  112 + },
  113 + {
  114 + name: '李小红',
  115 + age: 30,
  116 + address: '上海市浦东新区世纪大道'
  117 + },
  118 + {
  119 + name: '周小伟',
  120 + age: 26,
  121 + address: '深圳市南山区深南大道'
74 } 122 }
75 ], 123 ],
76 - data6: [ 124 + data2: [
77 { 125 {
78 name: '王小明', 126 name: '王小明',
79 age: 18, 127 age: 18,
@@ -95,18 +143,114 @@ @@ -95,18 +143,114 @@
95 address: '深圳市南山区深南大道' 143 address: '深圳市南山区深南大道'
96 } 144 }
97 ], 145 ],
98 - data7: []  
99 - }  
100 - },  
101 - methods: {  
102 - show (index) {  
103 - this.$Modal.info({  
104 - title: '用户信息',  
105 - content: `姓名：${this.data6[index].name}<br>年龄：${this.data6[index].age}<br>地址：${this.data6[index].address}`  
106 - })  
107 - },  
108 - remove (index) {  
109 - this.data6.splice(index, 1); 146 + columns5: [
  147 + {
  148 + title: '姓名',
  149 + key: 'name',
  150 + width: 100,
  151 + fixed: 'left'
  152 + },
  153 + {
  154 + title: '年龄',
  155 + key: 'age',
  156 + width: 100
  157 + },
  158 + {
  159 + title: '省份',
  160 + key: 'province',
  161 + width: 100
  162 + },
  163 + {
  164 + title: '市区',
  165 + key: 'city',
  166 + width: 100
  167 + },
  168 + {
  169 + title: '地址',
  170 + key: 'address',
  171 + width: 200
  172 + },
  173 + {
  174 + title: '邮编',
  175 + key: 'zip',
  176 + width: 100
  177 + },
  178 + {
  179 + title: '操作',
  180 + key: 'action',
  181 + fixed: 'right',
  182 + width: 120,
  183 + render () {
  184 + return `<i-button type="text" size="small">查看</i-button><i-button type="text" size="small">编辑</i-button>`;
  185 + }
  186 + }
  187 + ],
  188 + data4: [
  189 + {
  190 + name: '王小明',
  191 + age: 18,
  192 + address: '北京市朝阳区芍药居',
  193 + province: '北京市',
  194 + city: '朝阳区',
  195 + zip: 100000
  196 + },
  197 + {
  198 + name: '张小刚',
  199 + age: 25,
  200 + address: '北京市海淀区西二旗',
  201 + province: '北京市',
  202 + city: '海淀区',
  203 + zip: 100000
  204 + },
  205 + {
  206 + name: '李小红',
  207 + age: 30,
  208 + address: '上海市浦东新区世纪大道',
  209 + province: '上海市',
  210 + city: '浦东新区',
  211 + zip: 100000
  212 + },
  213 + {
  214 + name: '周小伟',
  215 + age: 26,
  216 + address: '深圳市南山区深南大道',
  217 + province: '广东',
  218 + city: '南山区',
  219 + zip: 100000
  220 + },
  221 + {
  222 + name: '王小明',
  223 + age: 18,
  224 + address: '北京市朝阳区芍药居',
  225 + province: '北京市',
  226 + city: '朝阳区',
  227 + zip: 100000
  228 + },
  229 + {
  230 + name: '张小刚',
  231 + age: 25,
  232 + address: '北京市海淀区西二旗',
  233 + province: '北京市',
  234 + city: '海淀区',
  235 + zip: 100000
  236 + },
  237 + {
  238 + name: '李小红',
  239 + age: 30,
  240 + address: '上海市浦东新区世纪大道',
  241 + province: '上海市',
  242 + city: '浦东新区',
  243 + zip: 100000
  244 + },
  245 + {
  246 + name: '周小伟',
  247 + age: 26,
  248 + address: '深圳市南山区深南大道',
  249 + province: '广东',
  250 + city: '南山区',
  251 + zip: 100000
  252 + }
  253 + ]
110 } 254 }
111 } 255 }
112 } 256 }