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
1 { 1 {
2 "name": "iview", 2 "name": "iview",
3 - "version": "0.9.9-rc-1", 3 + "version": "0.9.9-rc-2",
4 "title": "iView", 4 "title": "iView",
5 "description": "A high quality UI components Library with Vue.js", 5 "description": "A high quality UI components Library with Vue.js",
6 "homepage": "http://www.iviewui.com", 6 "homepage": "http://www.iviewui.com",
src/components/table/mixin.js
  Show/Hide comments   View file @5e7a3b2
@@ -10,6 +10,9 @@ export default { @@ -10,6 +10,9 @@ export default {
10 }, 10 },
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 + },
  14 + setCellWidth (index) {
  15 + return this.column[index].width ? this.column.width : this.columnsWidth[index];
13 } 16 }
14 } 17 }
15 } 18 }
16 \ No newline at end of file 19 \ No newline at end of file
src/components/table/table-body.vue
  Show/Hide comments   View file @5e7a3b2
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="item in setCellWidth" :width="setCellWidth($index)">
5 </colgroup> 5 </colgroup>
6 <tbody :class="[prefixCls + '-tbody']"> 6 <tbody :class="[prefixCls + '-tbody']">
7 <tr 7 <tr
@@ -37,6 +37,7 @@ @@ -37,6 +37,7 @@
37 columns: Array, 37 columns: Array,
38 data: Array, // rebuildData 38 data: Array, // rebuildData
39 objData: Object, 39 objData: Object,
  40 + columnsWidth: Array,
40 fixed: { 41 fixed: {
41 type: [Boolean, String], 42 type: [Boolean, String],
42 default: false 43 default: false
@@ -56,9 +57,6 @@ @@ -56,9 +57,6 @@
56 rowChecked (_index) { 57 rowChecked (_index) {
57 return this.objData[_index] && this.objData[_index]._isChecked; 58 return this.objData[_index] && this.objData[_index]._isChecked;
58 }, 59 },
59 - setCellWidth (column, index) {  
60 - return this.$parent.setCellWidth(column, index);  
61 - },  
62 rowClsName (_index) { 60 rowClsName (_index) {
63 return this.$parent.rowClassName(this.objData[_index], _index); 61 return this.$parent.rowClassName(this.objData[_index], _index);
64 }, 62 },
src/components/table/table-head.vue
  Show/Hide comments   View file @5e7a3b2
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="item in setCellWidth" :width="setCellWidth($index)">
5 </colgroup> 5 </colgroup>
6 <thead> 6 <thead>
7 <tr> 7 <tr>
@@ -69,6 +69,7 @@ @@ -69,6 +69,7 @@
69 columns: Array, 69 columns: Array,
70 objData: Object, 70 objData: Object,
71 data: Array, // rebuildData 71 data: Array, // rebuildData
  72 + columnsWidth: Array,
72 fixed: { 73 fixed: {
73 type: [Boolean, String], 74 type: [Boolean, String],
74 default: false 75 default: false
@@ -97,9 +98,6 @@ @@ -97,9 +98,6 @@
97 } 98 }
98 ] 99 ]
99 }, 100 },
100 - setCellWidth (column, index) {  
101 - return this.$parent.setCellWidth(column, index);  
102 - },  
103 renderHeader (column, $index) { 101 renderHeader (column, $index) {
104 if ('renderHeader' in this.columns[$index]) { 102 if ('renderHeader' in this.columns[$index]) {
105 return this.columns[$index].renderHeader(column, $index); 103 return this.columns[$index].renderHeader(column, $index);
src/components/table/table.vue
  Show/Hide comments   View file @5e7a3b2
@@ -8,6 +8,7 @@ @@ -8,6 +8,7 @@
8 :style="tableStyle" 8 :style="tableStyle"
9 :columns="cloneColumns" 9 :columns="cloneColumns"
10 :obj-data="objData" 10 :obj-data="objData"
  11 + :columns-width.sync="columnsWidth"
11 :data="rebuildData"></table-head> 12 :data="rebuildData"></table-head>
12 </div> 13 </div>
13 <div :class="[prefixCls + '-body']" :style="bodyStyle" v-el:body @scroll="handleBodyScroll"> 14 <div :class="[prefixCls + '-body']" :style="bodyStyle" v-el:body @scroll="handleBodyScroll">
@@ -17,6 +18,7 @@ @@ -17,6 +18,7 @@
17 :style="tableStyle" 18 :style="tableStyle"
18 :columns="cloneColumns" 19 :columns="cloneColumns"
19 :data="rebuildData" 20 :data="rebuildData"
  21 + :columns-width.sync="columnsWidth"
20 :obj-data="objData"></table-body> 22 :obj-data="objData"></table-body>
21 </div> 23 </div>
22 <div :class="[prefixCls + '-fixed']" :style="fixedTableStyle"> 24 <div :class="[prefixCls + '-fixed']" :style="fixedTableStyle">
@@ -27,6 +29,7 @@ @@ -27,6 +29,7 @@
27 :style="fixedTableStyle" 29 :style="fixedTableStyle"
28 :columns="leftFixedColumns" 30 :columns="leftFixedColumns"
29 :obj-data="objData" 31 :obj-data="objData"
  32 + :columns-width.sync="columnsWidth"
30 :data="rebuildData"></table-head> 33 :data="rebuildData"></table-head>
31 </div> 34 </div>
32 <div :class="[prefixCls + '-fixed-body']" :style="fixedBodyStyle" v-el:fixed-body> 35 <div :class="[prefixCls + '-fixed-body']" :style="fixedBodyStyle" v-el:fixed-body>
@@ -36,6 +39,7 @@ @@ -36,6 +39,7 @@
36 :style="fixedTableStyle" 39 :style="fixedTableStyle"
37 :columns="leftFixedColumns" 40 :columns="leftFixedColumns"
38 :data="rebuildData" 41 :data="rebuildData"
  42 + :columns-width.sync="columnsWidth"
39 :obj-data="objData"></table-body> 43 :obj-data="objData"></table-body>
40 </div> 44 </div>
41 </div> 45 </div>
@@ -47,6 +51,7 @@ @@ -47,6 +51,7 @@
47 :style="fixedRightTableStyle" 51 :style="fixedRightTableStyle"
48 :columns="rightFixedColumns" 52 :columns="rightFixedColumns"
49 :obj-data="objData" 53 :obj-data="objData"
  54 + :columns-width.sync="columnsWidth"
50 :data="rebuildData"></table-head> 55 :data="rebuildData"></table-head>
51 </div> 56 </div>
52 <div :class="[prefixCls + '-fixed-body']" :style="fixedBodyStyle" v-el:fixed-right-body> 57 <div :class="[prefixCls + '-fixed-body']" :style="fixedBodyStyle" v-el:fixed-right-body>
@@ -56,6 +61,7 @@ @@ -56,6 +61,7 @@
56 :style="fixedRightTableStyle" 61 :style="fixedRightTableStyle"
57 :columns="rightFixedColumns" 62 :columns="rightFixedColumns"
58 :data="rebuildData" 63 :data="rebuildData"
  64 + :columns-width.sync="columnsWidth"
59 :obj-data="objData"></table-body> 65 :obj-data="objData"></table-body>
60 </div> 66 </div>
61 </div> 67 </div>
@@ -247,9 +253,6 @@ @@ -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 handleMouseIn (_index) { 256 handleMouseIn (_index) {
254 if (this.objData[_index]._isHover) return; 257 if (this.objData[_index]._isHover) return;
255 this.objData[_index]._isHover = true; 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 <template> 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 </template> 3 </template>
33 <script> 4 <script>
34 export default { 5 export default {
35 - props: {  
36 -  
37 - },  
38 data () { 6 data () {
39 return { 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 title: '姓名', 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 title: '年龄', 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 title: '地址', 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 \ No newline at end of file 47 \ No newline at end of file
  48 +</script>