publish 0.9.9-rc-2

fixed Table autowidth

package.json

@@ -1,6 +1,6 @@
 {
   "name": "iview",
-  "version": "0.9.9-rc-1",
+  "version": "0.9.9-rc-2",
   "title": "iView",
   "description": "A high quality  UI components Library with Vue.js",
   "homepage": "http://www.iviewui.com",

src/components/table/mixin.js

@@ -10,6 +10,9 @@ export default {
         },
         isPopperShow (column) {
             return column.filters && ((!this.fixed && !column.fixed) || (this.fixed === 'left' && column.fixed === 'left') || (this.fixed === 'right' && column.fixed === 'right'));
+        },
+        setCellWidth (index) {
+            return this.column[index].width ? this.column.width : this.columnsWidth[index];
         }
     }
 }

src/components/table/table-body.vue

@@ -1,7 +1,7 @@
 <template>
     <table cellspacing="0" cellpadding="0" border="0" :style="style">
         <colgroup>
-            <col v-for="column in columns" :width="setCellWidth(column, $index)">
+            <col v-for="item in setCellWidth" :width="setCellWidth($index)">
         </colgroup>
         <tbody :class="[prefixCls + '-tbody']">
             <tr
@@ -37,6 +37,7 @@
             columns: Array,
             data: Array,    // rebuildData
             objData: Object,
+            columnsWidth: Array,
             fixed: {
                 type: [Boolean, String],
                 default: false
@@ -56,9 +57,6 @@
             rowChecked (_index) {
                 return this.objData[_index] && this.objData[_index]._isChecked;
             },
-            setCellWidth (column, index) {
-                return this.$parent.setCellWidth(column, index);
-            },
             rowClsName (_index) {
                 return this.$parent.rowClassName(this.objData[_index], _index);
             },

src/components/table/table-head.vue

@@ -1,7 +1,7 @@
 <template>
     <table cellspacing="0" cellpadding="0" border="0" :style="style">
         <colgroup>
-            <col v-for="column in columns" :width="setCellWidth(column, $index)">
+            <col v-for="item in setCellWidth" :width="setCellWidth($index)">
         </colgroup>
         <thead>
             <tr>
@@ -69,6 +69,7 @@
             columns: Array,
             objData: Object,
             data: Array,    // rebuildData
+            columnsWidth: Array,
             fixed: {
                 type: [Boolean, String],
                 default: false
@@ -97,9 +98,6 @@
                     }
                 ]
             },
-            setCellWidth (column, index) {
-                return this.$parent.setCellWidth(column, index);
-            },
             renderHeader (column, $index) {
                 if ('renderHeader' in this.columns[$index]) {
                     return this.columns[$index].renderHeader(column, $index);

src/components/table/table.vue

@@ -8,6 +8,7 @@
                     :style="tableStyle"
                     :columns="cloneColumns"
                     :obj-data="objData"
+                    :columns-width.sync="columnsWidth"
                     :data="rebuildData"></table-head>
             </div>
             <div :class="[prefixCls + '-body']" :style="bodyStyle" v-el:body @scroll="handleBodyScroll">
@@ -17,6 +18,7 @@
                     :style="tableStyle"
                     :columns="cloneColumns"
                     :data="rebuildData"
+                    :columns-width.sync="columnsWidth"
                     :obj-data="objData"></table-body>
             </div>
             <div :class="[prefixCls + '-fixed']" :style="fixedTableStyle">
@@ -27,6 +29,7 @@
                         :style="fixedTableStyle"
                         :columns="leftFixedColumns"
                         :obj-data="objData"
+                        :columns-width.sync="columnsWidth"
                         :data="rebuildData"></table-head>
                 </div>
                 <div :class="[prefixCls + '-fixed-body']" :style="fixedBodyStyle" v-el:fixed-body>
@@ -36,6 +39,7 @@
                         :style="fixedTableStyle"
                         :columns="leftFixedColumns"
                         :data="rebuildData"
+                        :columns-width.sync="columnsWidth"
                         :obj-data="objData"></table-body>
                 </div>
             </div>
@@ -47,6 +51,7 @@
                         :style="fixedRightTableStyle"
                         :columns="rightFixedColumns"
                         :obj-data="objData"
+                        :columns-width.sync="columnsWidth"
                         :data="rebuildData"></table-head>
                 </div>
                 <div :class="[prefixCls + '-fixed-body']" :style="fixedBodyStyle" v-el:fixed-right-body>
@@ -56,6 +61,7 @@
                         :style="fixedRightTableStyle"
                         :columns="rightFixedColumns"
                         :data="rebuildData"
+                        :columns-width.sync="columnsWidth"
                         :obj-data="objData"></table-body>
                 </div>
             </div>
@@ -247,9 +253,6 @@
                     });
                 });
             },
-            setCellWidth (column, index) {
-                return column.width ? column.width : this.columnsWidth[index];
-            },
             handleMouseIn (_index) {
                 if (this.objData[_index]._isHover) return;
                 this.objData[_index]._isHover = true;

test/routers/table.vue

@@ -1,273 +1,47 @@
-<style>
-    body{
-        height: auto;
-    }
-</style>
 <template>
-    <div>
+    <i-table :columns="columns1" :data="data1"></i-table>
-        <!--<i-table size="large" border stripe :columns="columns" :data="data"></i-table>-->
-        <br>
-        <i-table
-                width="850"
-                :height="height"
-                stripe
-                :border="true"
-                highlight-row
-                :show-header="true"
-                :columns="columns"
-                :data="data"
-                :row-class-name="rowClsName"
-                @on-current-change="current"
-                @on-select="select"
-                @on-selection-change="schange"
-                @on-select-all="sall"
-                @on-sort-change="sortChange">
-            <!--<div slot="header">表格标题</div>-->
-            <!--<div slot="footer">表格标题</div>-->
-        </i-table>
-        <br>
-        <i-button @click="showChildren">显示子节点</i-button>
-        <!--<i-table size="small" border stripe :columns="columns" :data="data"></i-table>-->
-    </div>
 </template>
 <script>
     export default {
-        props: {
-        
-        },
         data () {
             return {
-                columns: [
+                columns1: [
-                    {
-                        type: 'selection',
-                        width: 90,
-//                        fixed: 'left',
-                        align: 'center'
-                    },
-                    {
-                        type: 'index',
-                        width: 50
-                    },
                     {
                         title: '姓名',
-                        key: 'name',
+                        key: 'name'
-                        align: 'left',
-//                        fixed: 'left',
-                        sortable: true,
-                        width: 100,
-                        filters: [
-                            {
-                                label: '两个字',
-                                value: 1
-                            },
-                            {
-                                label: '三个字',
-                                value: 2
-                            }
-                        ],
-                        filterMultiple: false,
-                        filterMethod (value, row) {
-                            if (value === 1) {
-                                return row.name.length == 2;
-                            } else if (value === 2) {
-                                return row.name.length == 3;
-                            }
-                        }
-                    },
-                    {
-                        title: '标签',
-                        key: 'tag',
-                        width: 100,
-                        filters: [
-                            {
-                                label: '家',
-                                value: 'home'
-                            },
-                            {
-                                label: '公司',
-                                value: 'company'
-                            }
-                        ],
-                        filterMethod (value, row) {
-                            return row.tag === value;
-                        },
-//                        filteredValue: ['company'],
-                        render (row) {
-                            const type = `${row.tag}` === 'home' ? 'green' : 'red';
-                            return `<tag color="${type}">${row.tag}</tag>`;
-                        }
                     },
                     {
                         title: '年龄',
-                        key: 'age',
+                        key: 'age'
-                        align: 'right',
-//                        fixed: 'left',
-                        sortable: true,
-                        width: 100,
-                        filters: [
-                            {
-                                label: '大于25岁',
-                                value: 1
-                            },
-                            {
-                                label: '小于25岁',
-                                value: 2
-                            }
-                        ],
-                        filterMultiple: false,
-                        filterMethod (value, row) {
-                            if (value === 1) {
-                                return row.age >= 25;
-                            } else if (value === 2) {
-                                return row.age < 25;
-                            }
-                        }
-//                        render (row) {
-//                            return `<i-button>${row.age}</i-button>`
-//                        }
                     },
                     {
                         title: '地址',
-                        key: 'address',
+                        key: 'address'
-                        align: 'center',
-//                        fixed: 'left',
-                        width: 100,
-//                        render (row, column, index) {
-//                            if (row.edit) {
-//                                return `<i-input :value.sync="data[${index}].name"></i-input>`;
-//                            } else {
-//                                return `<Tooltip content="${row.address}"><i-button @click="show(${index})">${row.name}</i-button></Tooltip>`;
-//                            }
-//                        }
-                    },
-                    {
-                        title: '操作',
-                        key: 'action',
-//                        fixed: 'right',
-                        width: 250,
-                        render (row, column, index) {
-                            return `<i-button @click="edit(${index})">${row.name}${index}</i-button>`;
-//                            return `<a href="#">${row.name}</a>`;
-                        },
-                        filters: [
-                            {
-                                label: '两个字',
-                                value: 1
-                            },
-                            {
-                                label: '三个字',
-                                value: 2
                     }
                 ],
-                        filterMultiple: false,
+                data1: [
-                        filterMethod (value, row) {
-                            if (value === 1) {
-                                return row.name.length == 2;
-                            } else if (value === 2) {
-                                return row.name.length == 3;
-                            }
-                        }
-                    }
-                ],
-                data: [
                     {
-                        name: '梁灏梁灏梁灏梁灏梁灏梁灏梁灏',
+                        name: '王小明',
+                        age: 18,
+                        address: '北京市朝阳区芍药居'
+                    },
+                    {
+                        name: '张小刚',
                         age: 25,
-                        address: '北京市朝阳区',
+                        address: '北京市海淀区西二旗'
-                        edit: false,
-                        tag: 'home',
-                        action: 1
                     },
                     {
-                        name: '段模',
+                        name: '李小红',
-                        age: 21,
+                        age: 30,
-                        address: '北京市海淀区',
+                        address: '上海市浦东新区世纪大道'
-                        edit: false,
-                        tag: 'company',
-                        action: 2
                     },
                     {
-                        name: '刘天娇',
+                        name: '周小伟',
-                        age: 27,
+                        age: 26,
-                        address: '北京市东城区',
+                        address: '深圳市南山区深南大道'
-                        edit: false,
-                        tag: 'company',
-                        action: 3
-                    },
-                    {
-                        name: '胡国伟',
-                        age: 22,
-                        address: '北京市西城区',
-                        edit: false,
-                        tag: 'home',
-                        action: 4
                     }
-                ],
+                ]
-                height: 200
             }
-        },
-        computed: {
-        
-        },
-        methods: {
-            show (name) {
-                this.$Message.info(name);
-            },
-            edit (index) {
-//                this.data[index].edit = true;
-                this.$Message.info(this.data[index].name);
-            },
-            current (newData, oldData) {
-//                console.log(newData);
-//                console.log(oldData);
-            },
-            select (a,b){
-//                console.log(a);
-//                console.log(b);
-            },
-            schange (a) {
-//                console.log(a)
-            },
-            sall (a) {
-                console.log(a)
-            },
-            rowClsName (row, index) {
-                if (index == 1) {
-                    return 'row-success';
-                } else {
-                    return '';
-                }
-            },
-            sortChange (data) {
-                console.log(data)
-            },
-            showChildren () {
-                console.log(this.$children)
-            }
-        },
-        ready () {
-            setTimeout(() => {
-//                this.columns[3].width = 300;
-//                this.columns[2].width = 150;
-//                return;
-//                this.height = 150;
-//                this.data.push({
-//                    name: '刘天娇2',
-//                    age: 272,
-//                    address: '北京市东城区2',
-//                    edit: false
-//                });
-//                this.data.splice(0, 1);
-//                this.columns.splice(2,1)
-//                this.data.push({
-//                    name: '梁灏2',
-//                    age: 25,
-//                    address: '北京市朝阳区',
-//                    edit: false,
-//                    tag: 'home',
-//                    action: 1
-//                })
-            }, 3000);
         }
     }
 </script>