other / 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 169 showSlotHeader: true,
170 170 showSlotFooter: true,
171 171 bodyHeight: 0,
  172 + bodyRealHeight: 0,
172 173 scrollBarWidth: getScrollBarSize()
173 174 };
174 175 },
... ... @@ -206,7 +207,17 @@
206 207 tableStyle () {
207 208 let style = {};
208 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 221 style.width = `${width}px`;
211 222 }
212 223 return style;
... ... @@ -242,7 +253,13 @@
242 253 fixedBodyStyle () {
243 254 let style = {};
244 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 264 return style;
248 265 },
... ... @@ -315,6 +332,8 @@
315 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 339 handleMouseIn (_index) {
... ...
test/routers/table.vue
  Show/Hide comments   View file @d16dce6
1 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 13 </template>
15 14 <script>
16 15 export default {
17 16 data () {
18 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 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 53 title: '年龄',
57   - key: 'age'
  54 + key: 'age',
  55 + fixed: 'right'
58 56 },
59 57 {
60 58 title: '地址',
61 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 126 name: '王小明',
79 127 age: 18,
... ... @@ -95,18 +143,114 @@
95 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 }
... ...