fixed-head

examples/routers/table.vue

@@ -3,7 +3,7 @@
         <br><br><br><br><br>
         <Table border :columns="columns1" height="500" :data="data1"></Table>
         <br><br><br><br><br>
-        <!--<Table width="550" height="200" border :columns="columns2" :data="data4"></Table>-->
+        <Table width="550" height="200" border :columns="columns2" :data="data4"></Table>
         <br><br><br><br><br>
     </div>
 </template>
@@ -84,8 +84,7 @@
                         key: 'gender',
                         align: 'center',
                         width: 200,
-                        fixed: 'right',
-                        // fixed: 'left'
+                        fixed: 'right'
                     }
                 ],
                 columns2: [

src/components/table/table-head.vue

@@ -87,7 +87,8 @@
                 type: [Boolean, String],
                 default: false
             },
-            columnRows: Array
+            columnRows: Array,
+            fixedColumnRows: Array
         },
         computed: {
             styles () {
@@ -116,7 +117,11 @@
             },
             headRows () {
                 const isGroup = this.columnRows.length > 1;
-                return isGroup ? this.columnRows : [this.columns];
+                if (isGroup) {
+                    return this.fixed ? this.fixedColumnRows : this.columnRows;
+                } else {
+                    return [this.columns];
+                }
             }
         },
         methods: {

src/components/table/table.vue

@@ -45,6 +45,7 @@
                         :styleObject="fixedTableStyle"
                         :columns="leftFixedColumns"
                         :column-rows="columnRows"
+                        :fixed-column-rows="leftFixedColumnRows"
                         :obj-data="objData"
                         :columns-width="columnsWidth"
                         :data="rebuildData"></table-head>
@@ -68,6 +69,7 @@
                         :styleObject="fixedRightTableStyle"
                         :columns="rightFixedColumns"
                         :column-rows="columnRows"
+                        :fixed-column-rows="rightFixedColumnRows"
                         :obj-data="objData"
                         :columns-width="columnsWidth"
                         :data="rebuildData"></table-head>
@@ -184,7 +186,9 @@
                 objData: this.makeObjData(),     // checkbox or highlight-row
                 rebuildData: [],    // for sort or filter
                 cloneColumns: this.makeColumns(),
-                columnRows: this.makeColumnRows(),
+                columnRows: this.makeColumnRows(false),
+                leftFixedColumnRows: this.makeColumnRows('left'),
+                rightFixedColumnRows: this.makeColumnRows('right'),
                 allColumns: getAllColumns(this.columns),  // for multiple table-head, get columns that have no children
                 showSlotHeader: true,
                 showSlotFooter: true,
@@ -779,8 +783,8 @@
                 return left.concat(center).concat(right);
             },
             // create a multiple table-head
-            makeColumnRows () {
-                return convertToRows(this.columns);
+            makeColumnRows (fixedType) {
+                return convertToRows(this.columns, fixedType);
             },
             exportCsv (params) {
                 if (params.filename) {
@@ -858,7 +862,9 @@
                     // todo 这里有性能问题，可能是左右固定计算属性影响的
                     this.allColumns = getAllColumns(this.columns);
                     this.cloneColumns = this.makeColumns();
-                    this.columnRows = this.makeColumnRows();
+                    this.columnRows = this.makeColumnRows(false);
+                    this.leftFixedColumnRows = this.makeColumnRows('left');
+                    this.rightFixedColumnRows = this.makeColumnRows('right');
                     this.rebuildData = this.makeDataWithSortAndFilter();
                     this.handleResize();
                 },

src/components/table/util.js

@@ -1,5 +1,20 @@
 import { deepCopy } from '../../utils/assist';
 
+const convertColumnOrder = (columns, fixedType) => {
+    let list = [];
+    let other = [];
+    columns.forEach((col) => {
+        if (col.fixed && col.fixed === fixedType) {
+            list.push(col);
+        } else {
+            other.push(col);
+        }
+    });
+    return list.concat(other);
+};
+
+export {convertColumnOrder};
+
 // set forTableHead to true when convertToRows, false in normal cases like table.vue
 const getAllColumns = (cols, forTableHead = false) => {
     const columns = deepCopy(cols);
@@ -17,8 +32,8 @@ const getAllColumns = (cols, forTableHead = false) => {
 
 export {getAllColumns};
 
-const convertToRows = (columns) => {
-    const originColumns = deepCopy(columns);
+const convertToRows = (columns, fixedType = false) => {
+    const originColumns = fixedType ? fixedType === 'left' ? deepCopy(convertColumnOrder(columns, 'left')) : deepCopy(convertColumnOrder(columns, 'right')) : deepCopy(columns);
     let maxLevel = 1;
     const traverse = (column, parent) => {
         if (parent) {
@@ -64,18 +79,3 @@ const convertToRows = (columns) => {
 };
 
 export {convertToRows};
-
-const convertColumnOrder = (columns, FixedType) => {
-    let list = [];
-    let other = [];
-    columns.forEach((col) => {
-        if (col.fixed && col.fixed === FixedType) {
-            list.push(col);
-        } else {
-            other.push(col);
-        }
-    });
-    return list.concat(other);
-};
-
-export {convertColumnOrder};