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 11 isPopperShow (column) {
12 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 15 let width = '';
17 16 if (column.width) {
18 17 width = column.width;
19 18 } else if (this.columnsWidth[column._index]) {
20 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 30 return width;
24 31 }
25 32 }
... ...
src/components/table/table-body.vue
  Show/Hide comments   View file @3d6fa54
1 1 <template>
2 2 <table cellspacing="0" cellpadding="0" border="0" :style="style">
3 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 5 </colgroup>
6 6 <tbody :class="[prefixCls + '-tbody']">
7 7 <tr
... ...
src/components/table/table-head.vue
  Show/Hide comments   View file @3d6fa54
1 1 <template>
2 2 <table cellspacing="0" cellpadding="0" border="0" :style="style">
3 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 5 </colgroup>
6 6 <thead>
7 7 <tr>
... ...
src/components/table/table.vue
  Show/Hide comments   View file @3d6fa54
... ... @@ -85,7 +85,7 @@
85 85 <script>
86 86 import tableHead from './table-head.vue';
87 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 89 import Csv from '../../utils/csv';
90 90 import ExportCsv from './export-csv';
91 91 const prefixCls = 'ivu-table';
... ... @@ -143,11 +143,11 @@
143 143 },
144 144 noDataText: {
145 145 type: String,
146   - default: '无数据'
  146 + default: '暂无数据'
147 147 },
148 148 noFilteredDataText: {
149 149 type: String,
150   - default: '无筛选结果'
  150 + default: '暂无筛选结果'
151 151 }
152 152 },
153 153 data () {
... ... @@ -162,7 +162,8 @@
162 162 cloneColumns: this.makeColumns(),
163 163 showSlotHeader: true,
164 164 showSlotFooter: true,
165   - bodyHeight: 0
  165 + bodyHeight: 0,
  166 + scrollBarWidth: getScrollBarSize()
166 167 };
167 168 },
168 169 computed: {
... ... @@ -189,13 +190,19 @@
189 190 },
190 191 styles () {
191 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 197 if (this.width) style.width = `${this.width}px`;
194 198 return style;
195 199 },
196 200 tableStyle () {
197 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 206 return style;
200 207 },
201 208 fixedTableStyle () {
... ... @@ -213,17 +220,24 @@
213 220 this.rightFixedColumns.forEach((col) => {
214 221 if (col.fixed && col.fixed === 'right') width += col._width;
215 222 });
  223 + width += this.scrollBarWidth;
216 224 style.width = `${width}px`;
217 225 return style;
218 226 },
219 227 bodyStyle () {
220 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 234 return style;
223 235 },
224 236 fixedBodyStyle () {
225 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 241 return style;
228 242 },
229 243 leftFixedColumns () {
... ...
test/routers/table.vue
  Show/Hide comments   View file @3d6fa54
  1 +<style>
  2 + body{
  3 + overflow: hidden;
  4 + }
  5 +</style>
1 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 79 </template>
74 80 <script>
75 81 export default {
76 82 data () {
77 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 271 columns6: [
79 272 {
80 273 type: 'selection',
... ...