other / mew-iview

Commit 3d6fa54b39a82960b0d981e3e000973f9c9974ca

Authored by 梁灏
1 parent f23d6ba1

update Table 

update Table
Showing 5 changed files with 288 additions and 74 deletions   Show diff stats
Inline Side-by-side
src/components/table/mixin.js
  Show/Hide comments   View file @3d6fa54
@@ -11,15 +11,22 @@ export default { @@ -11,15 +11,22 @@ export default {
11 isPopperShow (column) { 11 isPopperShow (column) {
12 return column.filters && ((!this.fixed && !column.fixed) || (this.fixed === 'left' && column.fixed === 'left') || (this.fixed === 'right' && column.fixed === 'right')); 12 return column.filters && ((!this.fixed && !column.fixed) || (this.fixed === 'left' && column.fixed === 'left') || (this.fixed === 'right' && column.fixed === 'right'));
13 }, 13 },
14 - setCellWidth (column) {  
15 - // return column.width ? column.width : this.columnsWidth[index]; 14 + setCellWidth (column, index, top) {
16 let width = ''; 15 let width = '';
17 if (column.width) { 16 if (column.width) {
18 width = column.width; 17 width = column.width;
19 } else if (this.columnsWidth[column._index]) { 18 } else if (this.columnsWidth[column._index]) {
20 width = this.columnsWidth[column._index].width; 19 width = this.columnsWidth[column._index].width;
21 } 20 }
22 - // return this.columnsWidth[column._index] ? this.columnsWidth[column._index].width : ''; 21 + // when browser has scrollBar,set a width to resolve scroll position bug
  22 + if (this.columns.length === index + 1 && top) {
  23 + width += this.$parent.scrollBarWidth;
  24 + }
  25 + // when fixed type,reset first right fixed column's width
  26 + if (this.fixed === 'right') {
  27 + const firstFixedIndex = this.columns.findIndex((col) => col.fixed === 'right');
  28 + if (firstFixedIndex === index) width += this.$parent.scrollBarWidth;
  29 + }
23 return width; 30 return width;
24 } 31 }
25 } 32 }
src/components/table/table-body.vue
  Show/Hide comments   View file @3d6fa54
1 <template> 1 <template>
2 <table cellspacing="0" cellpadding="0" border="0" :style="style"> 2 <table cellspacing="0" cellpadding="0" border="0" :style="style">
3 <colgroup> 3 <colgroup>
4 - <col v-for="column in columns" :width="setCellWidth(column, $index)"> 4 + <col v-for="column in columns" :width="setCellWidth(column, $index, false)">
5 </colgroup> 5 </colgroup>
6 <tbody :class="[prefixCls + '-tbody']"> 6 <tbody :class="[prefixCls + '-tbody']">
7 <tr 7 <tr
src/components/table/table-head.vue
  Show/Hide comments   View file @3d6fa54
1 <template> 1 <template>
2 <table cellspacing="0" cellpadding="0" border="0" :style="style"> 2 <table cellspacing="0" cellpadding="0" border="0" :style="style">
3 <colgroup> 3 <colgroup>
4 - <col v-for="column in columns" :width="setCellWidth(column, $index)"> 4 + <col v-for="column in columns" :width="setCellWidth(column, $index, true)">
5 </colgroup> 5 </colgroup>
6 <thead> 6 <thead>
7 <tr> 7 <tr>
src/components/table/table.vue
  Show/Hide comments   View file @3d6fa54
@@ -85,7 +85,7 @@ @@ -85,7 +85,7 @@
85 <script> 85 <script>
86 import tableHead from './table-head.vue'; 86 import tableHead from './table-head.vue';
87 import tableBody from './table-body.vue'; 87 import tableBody from './table-body.vue';
88 - import { oneOf, getStyle, deepCopy } from '../../utils/assist'; 88 + import { oneOf, getStyle, deepCopy, getScrollBarSize } from '../../utils/assist';
89 import Csv from '../../utils/csv'; 89 import Csv from '../../utils/csv';
90 import ExportCsv from './export-csv'; 90 import ExportCsv from './export-csv';
91 const prefixCls = 'ivu-table'; 91 const prefixCls = 'ivu-table';
@@ -143,11 +143,11 @@ @@ -143,11 +143,11 @@
143 }, 143 },
144 noDataText: { 144 noDataText: {
145 type: String, 145 type: String,
146 - default: '无数据' 146 + default: '暂无数据'
147 }, 147 },
148 noFilteredDataText: { 148 noFilteredDataText: {
149 type: String, 149 type: String,
150 - default: '无筛选结果' 150 + default: '暂无筛选结果'
151 } 151 }
152 }, 152 },
153 data () { 153 data () {
@@ -162,7 +162,8 @@ @@ -162,7 +162,8 @@
162 cloneColumns: this.makeColumns(), 162 cloneColumns: this.makeColumns(),
163 showSlotHeader: true, 163 showSlotHeader: true,
164 showSlotFooter: true, 164 showSlotFooter: true,
165 - bodyHeight: 0 165 + bodyHeight: 0,
  166 + scrollBarWidth: getScrollBarSize()
166 }; 167 };
167 }, 168 },
168 computed: { 169 computed: {
@@ -189,13 +190,19 @@ @@ -189,13 +190,19 @@
189 }, 190 },
190 styles () { 191 styles () {
191 let style = {}; 192 let style = {};
192 - if (this.height) style.height = `${this.height}px`; 193 + if (this.height) {
  194 + const height = (this.isLeftFixed || this.isRightFixed) ? parseInt(this.height) + this.scrollBarWidth : parseInt(this.height);
  195 + style.height = `${height}px`;
  196 + }
193 if (this.width) style.width = `${this.width}px`; 197 if (this.width) style.width = `${this.width}px`;
194 return style; 198 return style;
195 }, 199 },
196 tableStyle () { 200 tableStyle () {
197 let style = {}; 201 let style = {};
198 - if (this.tableWidth !== 0) style.width = `${this.tableWidth}px`; 202 + if (this.tableWidth !== 0) {
  203 + const width = this.bodyHeight === 0 ? this.tableWidth : this.tableWidth - this.scrollBarWidth;
  204 + style.width = `${width}px`;
  205 + }
199 return style; 206 return style;
200 }, 207 },
201 fixedTableStyle () { 208 fixedTableStyle () {
@@ -213,17 +220,24 @@ @@ -213,17 +220,24 @@
213 this.rightFixedColumns.forEach((col) => { 220 this.rightFixedColumns.forEach((col) => {
214 if (col.fixed && col.fixed === 'right') width += col._width; 221 if (col.fixed && col.fixed === 'right') width += col._width;
215 }); 222 });
  223 + width += this.scrollBarWidth;
216 style.width = `${width}px`; 224 style.width = `${width}px`;
217 return style; 225 return style;
218 }, 226 },
219 bodyStyle () { 227 bodyStyle () {
220 let style = {}; 228 let style = {};
221 - if (this.bodyHeight !== 0) style.height = `${this.bodyHeight}px`; 229 + if (this.bodyHeight !== 0) {
  230 + // add a height to resolve scroll bug when browser has a scrollBar in fixed type and height prop
  231 + const height = (this.isLeftFixed || this.isRightFixed) ? this.bodyHeight + this.scrollBarWidth : this.bodyHeight;
  232 + style.height = `${height}px`;
  233 + }
222 return style; 234 return style;
223 }, 235 },
224 fixedBodyStyle () { 236 fixedBodyStyle () {
225 let style = {}; 237 let style = {};
226 - if (this.bodyHeight !== 0) style.height = `${this.bodyHeight - 1}px`; 238 + if (this.bodyHeight !== 0) {
  239 + style.height = this.scrollBarWidth > 0 ? `${this.bodyHeight}px` : `${this.bodyHeight - 1}px`;
  240 + }
227 return style; 241 return style;
228 }, 242 },
229 leftFixedColumns () { 243 leftFixedColumns () {
test/routers/table.vue
  Show/Hide comments   View file @3d6fa54
  1 +<style>
  2 + body{
  3 + overflow: hidden;
  4 + }
  5 +</style>
1 <template> 6 <template>
2 - <i-button @click="changeFilter">改变filter</i-button>  
3 - <span v-if="currentRow !== null">Current Row: {{currentRow.name}}</span>  
4 - <Switch size="small" @on-change="switchCellEllipsis"></Switch> Ellipsis  
5 - <i-table  
6 - border  
7 - :columns="columns6"  
8 - width="500"  
9 - :data="[]"  
10 - :highlight-row="true"  
11 - @on-current-change="onCurrentChange"  
12 - @on-dblclick="onDblclick">  
13 - </i-table> 7 + <i-table width="550" height="200" border :columns="columns2" :data="data4"></i-table>
  8 + <!--<i-button @click="changeFilter">改变filter</i-button>-->
  9 + <!--<span v-if="currentRow !== null">Current Row: {{currentRow.name}}</span>-->
  10 + <!--<Switch size="small" @on-change="switchCellEllipsis"></Switch> Ellipsis-->
  11 + <!--<i-table-->
  12 + <!--border-->
  13 + <!--:columns="columns6"-->
  14 + <!--width="500"-->
  15 + <!--:data="[]"-->
  16 + <!--:highlight-row="true"-->
  17 + <!--@on-current-change="onCurrentChange"-->
  18 + <!--@on-dblclick="onDblclick">-->
  19 + <!--</i-table>-->
14 20
15 - <br/> 21 + <!--<br/>-->
16 22
17 - <i-table  
18 - border  
19 - :columns="columns7"  
20 - :data="[]"  
21 - no-data-text="No Data"  
22 - :highlight-row="true"  
23 - @on-current-change="onCurrentChange"  
24 - @on-dblclick="onDblclick">  
25 - </i-table> 23 + <!--<i-table-->
  24 + <!--border-->
  25 + <!--:columns="columns7"-->
  26 + <!--:data="[]"-->
  27 + <!--no-data-text="No Data"-->
  28 + <!--:highlight-row="true"-->
  29 + <!--@on-current-change="onCurrentChange"-->
  30 + <!--@on-dblclick="onDblclick">-->
  31 + <!--</i-table>-->
26 32
27 - <br/> 33 + <!--<br/>-->
28 34
29 - <i-table  
30 - border  
31 - :columns="columns7"  
32 - :data="[]"  
33 - size="small"  
34 - :highlight-row="true"  
35 - @on-current-change="onCurrentChange"  
36 - @on-dblclick="onDblclick">  
37 - </i-table> 35 + <!--<i-table-->
  36 + <!--border-->
  37 + <!--:columns="columns7"-->
  38 + <!--:data="[]"-->
  39 + <!--size="small"-->
  40 + <!--:highlight-row="true"-->
  41 + <!--@on-current-change="onCurrentChange"-->
  42 + <!--@on-dblclick="onDblclick">-->
  43 + <!--</i-table>-->
38 44
39 - <br/> 45 + <!--<br/>-->
40 46
41 - <i-table  
42 - border  
43 - :columns="columns7"  
44 - :data="[]"  
45 - size="large"  
46 - :highlight-row="true"  
47 - @on-current-change="onCurrentChange"  
48 - @on-dblclick="onDblclick">  
49 - </i-table> 47 + <!--<i-table-->
  48 + <!--border-->
  49 + <!--:columns="columns7"-->
  50 + <!--:data="[]"-->
  51 + <!--size="large"-->
  52 + <!--:highlight-row="true"-->
  53 + <!--@on-current-change="onCurrentChange"-->
  54 + <!--@on-dblclick="onDblclick">-->
  55 + <!--</i-table>-->
50 56
51 - <br/> 57 + <!--<br/>-->
52 58
53 - <i-table  
54 - border  
55 - :columns="columns7"  
56 - :data="data5"  
57 - :highlight-row="true"  
58 - @on-current-change="onCurrentChange"  
59 - @on-dblclick="onDblclick">  
60 - </i-table> 59 + <!--<i-table-->
  60 + <!--border-->
  61 + <!--:columns="columns7"-->
  62 + <!--:data="data5"-->
  63 + <!--:highlight-row="true"-->
  64 + <!--@on-current-change="onCurrentChange"-->
  65 + <!--@on-dblclick="onDblclick">-->
  66 + <!--</i-table>-->
61 67
62 - <br/> 68 + <!--<br/>-->
63 69
64 - <i-table  
65 - border  
66 - :columns="columns6"  
67 - width="500"  
68 - :data="data5"  
69 - :highlight-row="true"  
70 - @on-current-change="onCurrentChange"  
71 - @on-dblclick="onDblclick">  
72 - </i-table> 70 + <!--<i-table-->
  71 + <!--border-->
  72 + <!--:columns="columns6"-->
  73 + <!--width="500"-->
  74 + <!--:data="data5"-->
  75 + <!--:highlight-row="true"-->
  76 + <!--@on-current-change="onCurrentChange"-->
  77 + <!--@on-dblclick="onDblclick">-->
  78 + <!--</i-table>-->
73 </template> 79 </template>
74 <script> 80 <script>
75 export default { 81 export default {
76 data () { 82 data () {
77 return { 83 return {
  84 + columns2: [
  85 + {
  86 + title: '姓名',
  87 + key: 'name',
  88 + width: 100,
  89 + fixed: 'left'
  90 + },
  91 + {
  92 + title: '年龄',
  93 + key: 'age',
  94 + width: 100
  95 + },
  96 + {
  97 + title: '省份',
  98 + key: 'province',
  99 + width: 100
  100 + },
  101 + {
  102 + title: '市区',
  103 + key: 'city',
  104 + width: 100
  105 + },
  106 + {
  107 + title: '地址',
  108 + key: 'address',
  109 + fixed: 'right',
  110 + width: 200
  111 + },
  112 + {
  113 + title: '邮编',
  114 + key: 'zip',
  115 + width: 100
  116 + },
  117 + {
  118 + title: '操作',
  119 + key: 'action',
  120 +// fixed: 'right',
  121 + width: 120,
  122 + render () {
  123 + return `<i-button type="text" size="small">查看</i-button><i-button type="text" size="small">编辑</i-button>`;
  124 + }
  125 + }
  126 + ],
  127 + data4: [
  128 + {
  129 + name: '王小明',
  130 + age: 18,
  131 + address: '北京市朝阳区芍药居',
  132 + province: '北京市',
  133 + city: '朝阳区',
  134 + zip: 100000
  135 + },
  136 + {
  137 + name: '张小刚',
  138 + age: 25,
  139 + address: '北京市海淀区西二旗',
  140 + province: '北京市',
  141 + city: '海淀区',
  142 + zip: 100000
  143 + },
  144 + {
  145 + name: '李小红',
  146 + age: 30,
  147 + address: '上海市浦东新区世纪大道',
  148 + province: '上海市',
  149 + city: '浦东新区',
  150 + zip: 100000
  151 + },
  152 + {
  153 + name: '周小伟',
  154 + age: 26,
  155 + address: '深圳市南山区深南大道',
  156 + province: '广东',
  157 + city: '南山区',
  158 + zip: 100000
  159 + },
  160 + {
  161 + name: '王小明',
  162 + age: 18,
  163 + address: '北京市朝阳区芍药居',
  164 + province: '北京市',
  165 + city: '朝阳区',
  166 + zip: 100000
  167 + },
  168 + {
  169 + name: '张小刚',
  170 + age: 25,
  171 + address: '北京市海淀区西二旗',
  172 + province: '北京市',
  173 + city: '海淀区',
  174 + zip: 100000
  175 + },
  176 + {
  177 + name: '李小红',
  178 + age: 30,
  179 + address: '上海市浦东新区世纪大道',
  180 + province: '上海市',
  181 + city: '浦东新区',
  182 + zip: 100000
  183 + },
  184 + {
  185 + name: '周小伟',
  186 + age: 26,
  187 + address: '深圳市南山区深南大道',
  188 + province: '广东',
  189 + city: '南山区',
  190 + zip: 100000
  191 + }
  192 + ],
  193 + columns1: [
  194 + {
  195 + title: '姓名',
  196 + key: 'name'
  197 + },
  198 + {
  199 + title: '年龄',
  200 + key: 'age'
  201 + },
  202 + {
  203 + title: '地址',
  204 + key: 'address'
  205 + }
  206 + ],
  207 + data1: [
  208 + {
  209 + name: '王小明',
  210 + age: 18,
  211 + address: '北京市朝阳区芍药居'
  212 + },
  213 + {
  214 + name: '张小刚',
  215 + age: 25,
  216 + address: '北京市海淀区西二旗'
  217 + },
  218 + {
  219 + name: '李小红',
  220 + age: 30,
  221 + address: '上海市浦东新区世纪大道'
  222 + },
  223 + {
  224 + name: '周小伟',
  225 + age: 26,
  226 + address: '深圳市南山区深南大道'
  227 + }
  228 + ],
  229 + data2: [
  230 + {
  231 + name: '王小明',
  232 + age: 18,
  233 + address: '北京市朝阳区芍药居'
  234 + },
  235 + {
  236 + name: '张小刚',
  237 + age: 25,
  238 + address: '北京市海淀区西二旗'
  239 + },
  240 + {
  241 + name: '李小红',
  242 + age: 30,
  243 + address: '上海市浦东新区世纪大道'
  244 + },
  245 + {
  246 + name: '周小伟',
  247 + age: 26,
  248 + address: '深圳市南山区深南大道'
  249 + },
  250 + {
  251 + name: '王小明',
  252 + age: 18,
  253 + address: '北京市朝阳区芍药居'
  254 + },
  255 + {
  256 + name: '张小刚',
  257 + age: 25,
  258 + address: '北京市海淀区西二旗'
  259 + },
  260 + {
  261 + name: '李小红',
  262 + age: 30,
  263 + address: '上海市浦东新区世纪大道'
  264 + },
  265 + {
  266 + name: '周小伟',
  267 + age: 26,
  268 + address: '深圳市南山区深南大道'
  269 + }
  270 + ],
78 columns6: [ 271 columns6: [
79 { 272 {
80 type: 'selection', 273 type: 'selection',