other / mew-iview

Commit 5e7a3b293bb35f019045c8b0bd7dcc111d802fc7

Authored by 梁灏
1 parent 872c1354

publish 0.9.9-rc-2 

fixed Table autowidth
Showing 7 changed files with 34 additions and 258 deletions   Show diff stats
Inline Side-by-side
assets/iview.png deleted
View file @872c135

157 KB
package.json
  Show/Hide comments   View file @5e7a3b2
1 1 {
2 2 "name": "iview",
3   - "version": "0.9.9-rc-1",
  3 + "version": "0.9.9-rc-2",
4 4 "title": "iView",
5 5 "description": "A high quality UI components Library with Vue.js",
6 6 "homepage": "http://www.iviewui.com",
... ...
src/components/table/mixin.js
  Show/Hide comments   View file @5e7a3b2
... ... @@ -10,6 +10,9 @@ export default {
10 10 },
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 + },
  14 + setCellWidth (index) {
  15 + return this.column[index].width ? this.column.width : this.columnsWidth[index];
13 16 }
14 17 }
15 18 }
16 19 \ No newline at end of file
... ...
src/components/table/table-body.vue
  Show/Hide comments   View file @5e7a3b2
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="item in setCellWidth" :width="setCellWidth($index)">
5 5 </colgroup>
6 6 <tbody :class="[prefixCls + '-tbody']">
7 7 <tr
... ... @@ -37,6 +37,7 @@
37 37 columns: Array,
38 38 data: Array, // rebuildData
39 39 objData: Object,
  40 + columnsWidth: Array,
40 41 fixed: {
41 42 type: [Boolean, String],
42 43 default: false
... ... @@ -56,9 +57,6 @@
56 57 rowChecked (_index) {
57 58 return this.objData[_index] && this.objData[_index]._isChecked;
58 59 },
59   - setCellWidth (column, index) {
60   - return this.$parent.setCellWidth(column, index);
61   - },
62 60 rowClsName (_index) {
63 61 return this.$parent.rowClassName(this.objData[_index], _index);
64 62 },
... ...
src/components/table/table-head.vue
  Show/Hide comments   View file @5e7a3b2
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="item in setCellWidth" :width="setCellWidth($index)">
5 5 </colgroup>
6 6 <thead>
7 7 <tr>
... ... @@ -69,6 +69,7 @@
69 69 columns: Array,
70 70 objData: Object,
71 71 data: Array, // rebuildData
  72 + columnsWidth: Array,
72 73 fixed: {
73 74 type: [Boolean, String],
74 75 default: false
... ... @@ -97,9 +98,6 @@
97 98 }
98 99 ]
99 100 },
100   - setCellWidth (column, index) {
101   - return this.$parent.setCellWidth(column, index);
102   - },
103 101 renderHeader (column, $index) {
104 102 if ('renderHeader' in this.columns[$index]) {
105 103 return this.columns[$index].renderHeader(column, $index);
... ...
src/components/table/table.vue
  Show/Hide comments   View file @5e7a3b2
... ... @@ -8,6 +8,7 @@
8 8 :style="tableStyle"
9 9 :columns="cloneColumns"
10 10 :obj-data="objData"
  11 + :columns-width.sync="columnsWidth"
11 12 :data="rebuildData"></table-head>
12 13 </div>
13 14 <div :class="[prefixCls + '-body']" :style="bodyStyle" v-el:body @scroll="handleBodyScroll">
... ... @@ -17,6 +18,7 @@
17 18 :style="tableStyle"
18 19 :columns="cloneColumns"
19 20 :data="rebuildData"
  21 + :columns-width.sync="columnsWidth"
20 22 :obj-data="objData"></table-body>
21 23 </div>
22 24 <div :class="[prefixCls + '-fixed']" :style="fixedTableStyle">
... ... @@ -27,6 +29,7 @@
27 29 :style="fixedTableStyle"
28 30 :columns="leftFixedColumns"
29 31 :obj-data="objData"
  32 + :columns-width.sync="columnsWidth"
30 33 :data="rebuildData"></table-head>
31 34 </div>
32 35 <div :class="[prefixCls + '-fixed-body']" :style="fixedBodyStyle" v-el:fixed-body>
... ... @@ -36,6 +39,7 @@
36 39 :style="fixedTableStyle"
37 40 :columns="leftFixedColumns"
38 41 :data="rebuildData"
  42 + :columns-width.sync="columnsWidth"
39 43 :obj-data="objData"></table-body>
40 44 </div>
41 45 </div>
... ... @@ -47,6 +51,7 @@
47 51 :style="fixedRightTableStyle"
48 52 :columns="rightFixedColumns"
49 53 :obj-data="objData"
  54 + :columns-width.sync="columnsWidth"
50 55 :data="rebuildData"></table-head>
51 56 </div>
52 57 <div :class="[prefixCls + '-fixed-body']" :style="fixedBodyStyle" v-el:fixed-right-body>
... ... @@ -56,6 +61,7 @@
56 61 :style="fixedRightTableStyle"
57 62 :columns="rightFixedColumns"
58 63 :data="rebuildData"
  64 + :columns-width.sync="columnsWidth"
59 65 :obj-data="objData"></table-body>
60 66 </div>
61 67 </div>
... ... @@ -247,9 +253,6 @@
247 253 });
248 254 });
249 255 },
250   - setCellWidth (column, index) {
251   - return column.width ? column.width : this.columnsWidth[index];
252   - },
253 256 handleMouseIn (_index) {
254 257 if (this.objData[_index]._isHover) return;
255 258 this.objData[_index]._isHover = true;
... ...
test/routers/table.vue
  Show/Hide comments   View file @5e7a3b2
1   -<style>
2   - body{
3   - height: auto;
4   - }
5   -</style>
6 1 <template>
7   - <div>
8   - <!--<i-table size="large" border stripe :columns="columns" :data="data"></i-table>-->
9   - <br>
10   - <i-table
11   - width="850"
12   - :height="height"
13   - stripe
14   - :border="true"
15   - highlight-row
16   - :show-header="true"
17   - :columns="columns"
18   - :data="data"
19   - :row-class-name="rowClsName"
20   - @on-current-change="current"
21   - @on-select="select"
22   - @on-selection-change="schange"
23   - @on-select-all="sall"
24   - @on-sort-change="sortChange">
25   - <!--<div slot="header">表格标题</div>-->
26   - <!--<div slot="footer">表格标题</div>-->
27   - </i-table>
28   - <br>
29   - <i-button @click="showChildren">显示子节点</i-button>
30   - <!--<i-table size="small" border stripe :columns="columns" :data="data"></i-table>-->
31   - </div>
  2 + <i-table :columns="columns1" :data="data1"></i-table>
32 3 </template>
33 4 <script>
34 5 export default {
35   - props: {
36   -
37   - },
38 6 data () {
39 7 return {
40   - columns: [
41   - {
42   - type: 'selection',
43   - width: 90,
44   -// fixed: 'left',
45   - align: 'center'
46   - },
47   - {
48   - type: 'index',
49   - width: 50
50   - },
  8 + columns1: [
51 9 {
52 10 title: '姓名',
53   - key: 'name',
54   - align: 'left',
55   -// fixed: 'left',
56   - sortable: true,
57   - width: 100,
58   - filters: [
59   - {
60   - label: '两个字',
61   - value: 1
62   - },
63   - {
64   - label: '三个字',
65   - value: 2
66   - }
67   - ],
68   - filterMultiple: false,
69   - filterMethod (value, row) {
70   - if (value === 1) {
71   - return row.name.length == 2;
72   - } else if (value === 2) {
73   - return row.name.length == 3;
74   - }
75   - }
76   - },
77   - {
78   - title: '标签',
79   - key: 'tag',
80   - width: 100,
81   - filters: [
82   - {
83   - label: '家',
84   - value: 'home'
85   - },
86   - {
87   - label: '公司',
88   - value: 'company'
89   - }
90   - ],
91   - filterMethod (value, row) {
92   - return row.tag === value;
93   - },
94   -// filteredValue: ['company'],
95   - render (row) {
96   - const type = `${row.tag}` === 'home' ? 'green' : 'red';
97   - return `<tag color="${type}">${row.tag}</tag>`;
98   - }
  11 + key: 'name'
99 12 },
100 13 {
101 14 title: '年龄',
102   - key: 'age',
103   - align: 'right',
104   -// fixed: 'left',
105   - sortable: true,
106   - width: 100,
107   - filters: [
108   - {
109   - label: '大于25岁',
110   - value: 1
111   - },
112   - {
113   - label: '小于25岁',
114   - value: 2
115   - }
116   - ],
117   - filterMultiple: false,
118   - filterMethod (value, row) {
119   - if (value === 1) {
120   - return row.age >= 25;
121   - } else if (value === 2) {
122   - return row.age < 25;
123   - }
124   - }
125   -// render (row) {
126   -// return `<i-button>${row.age}</i-button>`
127   -// }
  15 + key: 'age'
128 16 },
129 17 {
130 18 title: '地址',
131   - key: 'address',
132   - align: 'center',
133   -// fixed: 'left',
134   - width: 100,
135   -// render (row, column, index) {
136   -// if (row.edit) {
137   -// return `<i-input :value.sync="data[${index}].name"></i-input>`;
138   -// } else {
139   -// return `<Tooltip content="${row.address}"><i-button @click="show(${index})">${row.name}</i-button></Tooltip>`;
140   -// }
141   -// }
142   - },
143   - {
144   - title: '操作',
145   - key: 'action',
146   -// fixed: 'right',
147   - width: 250,
148   - render (row, column, index) {
149   - return `<i-button @click="edit(${index})">${row.name}${index}</i-button>`;
150   -// return `<a href="#">${row.name}</a>`;
151   - },
152   - filters: [
153   - {
154   - label: '两个字',
155   - value: 1
156   - },
157   - {
158   - label: '三个字',
159   - value: 2
160   - }
161   - ],
162   - filterMultiple: false,
163   - filterMethod (value, row) {
164   - if (value === 1) {
165   - return row.name.length == 2;
166   - } else if (value === 2) {
167   - return row.name.length == 3;
168   - }
169   - }
  19 + key: 'address'
170 20 }
171 21 ],
172   - data: [
  22 + data1: [
173 23 {
174   - name: '梁灏梁灏梁灏梁灏梁灏梁灏梁灏',
175   - age: 25,
176   - address: '北京市朝阳区',
177   - edit: false,
178   - tag: 'home',
179   - action: 1
  24 + name: '王小明',
  25 + age: 18,
  26 + address: '北京市朝阳区芍药居'
180 27 },
181 28 {
182   - name: '段模',
183   - age: 21,
184   - address: '北京市海淀区',
185   - edit: false,
186   - tag: 'company',
187   - action: 2
  29 + name: '张小刚',
  30 + age: 25,
  31 + address: '北京市海淀区西二旗'
188 32 },
189 33 {
190   - name: '刘天娇',
191   - age: 27,
192   - address: '北京市东城区',
193   - edit: false,
194   - tag: 'company',
195   - action: 3
  34 + name: '李小红',
  35 + age: 30,
  36 + address: '上海市浦东新区世纪大道'
196 37 },
197 38 {
198   - name: '胡国伟',
199   - age: 22,
200   - address: '北京市西城区',
201   - edit: false,
202   - tag: 'home',
203   - action: 4
  39 + name: '周小伟',
  40 + age: 26,
  41 + address: '深圳市南山区深南大道'
204 42 }
205   - ],
206   - height: 200
207   - }
208   - },
209   - computed: {
210   -
211   - },
212   - methods: {
213   - show (name) {
214   - this.$Message.info(name);
215   - },
216   - edit (index) {
217   -// this.data[index].edit = true;
218   - this.$Message.info(this.data[index].name);
219   - },
220   - current (newData, oldData) {
221   -// console.log(newData);
222   -// console.log(oldData);
223   - },
224   - select (a,b){
225   -// console.log(a);
226   -// console.log(b);
227   - },
228   - schange (a) {
229   -// console.log(a)
230   - },
231   - sall (a) {
232   - console.log(a)
233   - },
234   - rowClsName (row, index) {
235   - if (index == 1) {
236   - return 'row-success';
237   - } else {
238   - return '';
239   - }
240   - },
241   - sortChange (data) {
242   - console.log(data)
243   - },
244   - showChildren () {
245   - console.log(this.$children)
  43 + ]
246 44 }
247   - },
248   - ready () {
249   - setTimeout(() => {
250   -// this.columns[3].width = 300;
251   -// this.columns[2].width = 150;
252   -// return;
253   -// this.height = 150;
254   -// this.data.push({
255   -// name: '刘天娇2',
256   -// age: 272,
257   -// address: '北京市东城区2',
258   -// edit: false
259   -// });
260   -// this.data.splice(0, 1);
261   -// this.columns.splice(2,1)
262   -// this.data.push({
263   -// name: '梁灏2',
264   -// age: 25,
265   -// address: '北京市朝阳区',
266   -// edit: false,
267   -// tag: 'home',
268   -// action: 1
269   -// })
270   - }, 3000);
271 45 }
272 46 }
273   -</script>
274 47 \ No newline at end of file
  48 +</script>
... ...