update Table

update Table

src/components/table/cell.vue

@@ -19,7 +19,10 @@
             naturalIndex: Number,    // index of rebuildData
             index: Number,           // _index of data
             checked: Boolean,
-            fixed: Boolean
+            fixed: {
+                type: [Boolean, String],
+                default: false
+            }
         },
         data () {
             return {

src/components/table/mixin.js

@@ -1,7 +1,15 @@
 export default {
     methods: {
         alignCls (column) {
-            return column.align ? `${this.prefixCls}-column-${column.align}` : '';
+            return [
+                {
+                    [`${this.prefixCls}-column-${column.align}`]: column.align,
+                    [`${this.prefixCls}-hidden`]: (this.fixed === 'left' && column.fixed !== 'left') || (this.fixed === 'right' && column.fixed !== 'right') || (!this.fixed && column.fixed && (column.fixed === 'left' || column.fixed === 'right'))
+                }
+            ]
+        },
+        isPopperShow (column) {
+            return column.filters && ((!this.fixed && !column.fixed) || (this.fixed === 'left' && column.fixed === 'left') || (this.fixed === 'right' && column.fixed === 'right'));
         }
     }
 }

src/components/table/table-body.vue

@@ -37,7 +37,10 @@
             columns: Array,
             data: Array,    // rebuildData
             objData: Object,
-            fixed: Boolean
+            fixed: {
+                type: [Boolean, String],
+                default: false
+            }
         },
         methods: {
             rowClasses (_index) {

src/components/table/table-head.vue

@@ -15,7 +15,7 @@
                                 <i class="ivu-icon ivu-icon-arrow-down-b" :class="{on: column._sortType === 'desc'}" @click="handleSort($index, 'desc')"></i>
                             </span>
                             <Poptip
-                                v-if="column.filters && (fixed || (!fixed && !column.fixed))"
+                                v-if="isPopperShow(column)"
                                 :visible.sync="column._filterVisible"
                                 placement="bottom"
                                 @on-popper-hide="handleFilterHide($index)">
@@ -69,7 +69,10 @@
             columns: Array,
             objData: Object,
             data: Array,    // rebuildData
-            fixed: Boolean
+            fixed: {
+                type: [Boolean, String],
+                default: false
+            }
         },
         computed: {
             isSelectAll () {

src/components/table/table.vue

@@ -19,10 +19,10 @@
                     :data="rebuildData"
                     :obj-data="objData"></table-body>
             </div>
-            <div :class="[prefixCls + '-fixed']">
+            <div :class="[prefixCls + '-fixed']" :style="fixedTableStyle">
                 <div :class="[prefixCls + '-fixed-header']" v-if="showHeader">
                     <table-head
-                        fixed
+                        fixed="left"
                         :prefix-cls="prefixCls"
                         :style="fixedTableStyle"
                         :columns="leftFixedColumns"
@@ -31,7 +31,7 @@
                 </div>
                 <div :class="[prefixCls + '-fixed-body']" :style="fixedBodyStyle" v-el:fixed-body>
                     <table-body
-                        fixed
+                        fixed="left"
                         :prefix-cls="prefixCls"
                         :style="fixedTableStyle"
                         :columns="leftFixedColumns"
@@ -39,10 +39,10 @@
                         :obj-data="objData"></table-body>
                 </div>
             </div>
-            <div :class="[prefixCls + '-fixed-right']">
+            <div :class="[prefixCls + '-fixed-right']" :style="fixedRightTableStyle">
                 <div :class="[prefixCls + '-fixed-header']" v-if="showHeader">
                     <table-head
-                        fixed
+                        fixed="right"
                         :prefix-cls="prefixCls"
                         :style="fixedRightTableStyle"
                         :columns="rightFixedColumns"
@@ -51,7 +51,7 @@
                 </div>
                 <div :class="[prefixCls + '-fixed-body']" :style="fixedBodyStyle" v-el:fixed-right-body>
                     <table-body
-                        fixed
+                        fixed="right"
                         :prefix-cls="prefixCls"
                         :style="fixedRightTableStyle"
                         :columns="rightFixedColumns"
@@ -126,7 +126,7 @@
                 prefixCls: prefixCls,
                 compiledUids: [],
                 objData: this.makeObjData(),     // checkbox or highlight-row
-                rebuildData: this.makeData(),    // for sort or filter
+                rebuildData: [],    // for sort or filter
                 cloneColumns: this.makeColumns(),
                 showSlotHeader: true,
                 showSlotFooter: true,
@@ -168,12 +168,20 @@
             },
             fixedTableStyle () {
                 let style = {};
-                if (this.leftFixedColumns.length) style.width = this.leftFixedColumns.reduce((a, b) => a + b);
+                let width = 0;
+                this.leftFixedColumns.forEach((col) => {
+                    if (col.fixed && col.fixed === 'left') width += col.width;
+                });
+                style.width = `${width}px`;
                 return style;
             },
             fixedRightTableStyle () {
                 let style = {};
-                if (this.rightFixedColumns.length) style.width = this.rightFixedColumns.reduce((a, b) => a + b);
+                let width = 0;
+                this.rightFixedColumns.forEach((col) => {
+                    if (col.fixed && col.fixed === 'right') width += col.width;
+                });
+                style.width = `${width}px`;
                 return style;
             },
             bodyStyle () {
@@ -188,21 +196,27 @@
             },
             leftFixedColumns () {
                 let left = [];
+                let other = [];
                 this.cloneColumns.forEach((col) => {
                     if (col.fixed && col.fixed === 'left') {
                         left.push(col);
+                    } else {
+                        other.push(col);
                     }
                 });
-                return left;
+                return left.concat(other);
             },
             rightFixedColumns () {
                 let right = [];
+                let other = [];
                 this.cloneColumns.forEach((col) => {
                     if (col.fixed && col.fixed === 'right') {
                         right.push(col);
+                    } else {
+                        other.push(col);
                     }
                 });
-                return right;
+                return right.concat(other);
             }
         },
         methods: {
@@ -457,6 +471,10 @@
                     } else {
                         column._filterMultiple = true;
                     }
+                    if ('filteredValue' in column) {
+                        column._filterChecked = column.filteredValue;
+                        column._isFiltered = true;
+                    }
 
                     if (column.fixed && column.fixed === 'left') {
                         left.push(column);
@@ -472,6 +490,7 @@
         compiled () {
             this.showSlotHeader = this.$els.title.innerHTML.replace(/\n/g, '').replace(/<!--[\w\W\r\n]*?-->/gmi, '') !== '';
             this.showSlotFooter = this.$els.footer.innerHTML.replace(/\n/g, '').replace(/<!--[\w\W\r\n]*?-->/gmi, '') !== '';
+            this.rebuildData = this.makeDataWithSortAndFilter();
         },
         ready () {
             this.handleResize();

src/styles/components/table.less

@@ -206,7 +206,6 @@
         position: absolute;
         top: 0;
         left: 0;
-        //box-shadow: @shadow-right;
         box-shadow: 2px 0 6px -2px rgba(0, 0, 0, 0.2);
 
         &::before {
@@ -224,13 +223,10 @@
         top: 0;
         left: auto;
         right: 0;
-        //box-shadow: @shadow-left;
         box-shadow: -2px 0 6px -2px rgba(0, 0, 0, 0.2);
     }
     &-fixed-header{
         overflow: hidden;
-        //position: relative;
-        //z-index: 3;
     }
     &-fixed-body{
         overflow: hidden;

test/routers/table.vue

@@ -8,7 +8,7 @@
         <!--<i-table size="large" border stripe :columns="columns" :data="data"></i-table>-->
         <br>
         <i-table
-                width="450"
+                width="850"
                 :height="height"
                 stripe
                 :border="true"
@@ -40,8 +40,8 @@
                 columns: [
                     {
                         type: 'selection',
-                        width: 50,
+                        width: 90,
-                        fixed: 'left',
+//                        fixed: 'left',
                         align: 'center'
                     },
                     {
@@ -52,7 +52,7 @@
                         title: '姓名',
                         key: 'name',
                         align: 'left',
-                        fixed: 'left',
+//                        fixed: 'left',
                         sortable: true,
                         width: 100,
                         filters: [
@@ -91,6 +91,7 @@
                         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>`;
@@ -129,7 +130,7 @@
                         title: '地址',
                         key: 'address',
                         align: 'center',
-//                        fixed: 'right',
+//                        fixed: 'left',
                         width: 100,
 //                        render (row, column, index) {
 //                            if (row.edit) {
@@ -142,17 +143,35 @@
                     {
                         title: '操作',
                         key: 'action',
-                        fixed: 'right',
+//                        fixed: 'right',
-                        width: 120,
+                        width: 250,
                         render (row, column, index) {
                             return `<i-button @click="edit(${index})">${row.name}${index}</i-button>`;
-                            return `<a>${row.name}</a>`;
+//                            return `<a href="#">${row.name}</a>`;
+                        },
+                        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;
+                            }
                         }
                     }
                 ],
                 data: [
                     {
-                        name: '梁灏',
+                        name: '梁灏梁灏梁灏梁灏梁灏梁灏梁灏',
                         age: 25,
                         address: '北京市朝阳区',
                         edit: false,