fixed #3339

梁灏
1 parent eeeceb54
Showing 3 changed files with 47 additions and 18 deletions Show diff stats
src/components/table/table-head.vue
src/components/table/table.vue
src/components/table/util.js
@@ -34,6 +34,7 @@
                                 <span :class="[prefixCls + '-filter']">
                                     <i class="ivu-icon ivu-icon-funnel" :class="{on: getColumn(rowIndex, index)._isFiltered}"></i>
                                 </span>
+
                                 <div slot="content" :class="[prefixCls + '-filter-list']" v-if="getColumn(rowIndex, index)._filterMultiple">
                                     <div :class="[prefixCls + '-filter-list-item']">
                                         <checkbox-group v-model="getColumn(rowIndex, index)._filterChecked">
@@ -133,8 +134,8 @@
             },
             scrollBarCellClass(){
                 let hasRightFixed = false;
-                for(var i in this.headRows){
-                    for(var j in this.headRows[i]){
+                for(let i in this.headRows){
+                    for(let j in this.headRows[i]){
                         if(this.headRows[i][j].fixed === 'right') {
                             hasRightFixed=true;
                             break;
@@ -205,7 +206,13 @@
             // 因为表头嵌套不是深拷贝，所以没有 _ 开头的方法，在 isGroup 下用此列
             getColumn (rowIndex, index) {
                 const isGroup = this.columnRows.length > 1;
-                return isGroup ? this.columns[rowIndex] : this.headRows[rowIndex][index];
+
+                if (isGroup) {
+                    const id = this.headRows[rowIndex][index].__id;
+                    return this.columns.filter(item => item.__id === id)[0];
+                } else {
+                    return this.headRows[rowIndex][index];
+                }
             }
         }
     };
@@ -103,7 +103,7 @@
     import ExportCsv from './export-csv';
     import Locale from '../../mixins/locale';
     import elementResizeDetectorMaker from 'element-resize-detector';
-    import { getAllColumns, convertToRows, convertColumnOrder } from './util';
+    import { getAllColumns, convertToRows, convertColumnOrder, getRandomStr } from './util';
     const prefixCls = 'ivu-table';
@@ -178,6 +178,7 @@
             }
         },
         data () {
+            const colsWithId = this.makeColumnsId(this.columns);
             return {
                 ready: false,
                 tableWidth: 0,
@@ -186,13 +187,13 @@
                 compiledUids: [],
                 objData: this.makeObjData(),     // checkbox or highlight-row
                 rebuildData: [],    // for sort or filter
-                cloneColumns: this.makeColumns(),
+                cloneColumns: this.makeColumns(colsWithId),
                 minWidthColumns:[],
                 maxWidthColumns:[],
-                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
+                columnRows: this.makeColumnRows(false, colsWithId),
+                leftFixedColumnRows: this.makeColumnRows('left', colsWithId),
+                rightFixedColumnRows: this.makeColumnRows('right', colsWithId),
+                allColumns: getAllColumns(colsWithId),  // for multiple table-head, get columns that have no children
                 showSlotHeader: true,
                 showSlotFooter: true,
                 bodyHeight: 0,
@@ -828,9 +829,17 @@
                 });
                 return data;
             },
-            makeColumns () {
+            // 修改列，设置一个隐藏的 id，便于后面的多级表头寻找对应的列，否则找不到
+            makeColumnsId (columns) {
+                return columns.map(item => {
+                    if ('children' in item) item.children = this.makeColumnsId(item.children);
+                    item.__id = getRandomStr(6);
+                    return item;
+                });
+            },
+            makeColumns (cols) {
                 // 在 data 时，this.allColumns 暂时为 undefined
-                let columns = deepCopy(getAllColumns(this.columns));
+                let columns = deepCopy(getAllColumns(cols));
                 let left = [];
                 let right = [];
                 let center = [];
@@ -869,8 +878,8 @@
                 return left.concat(center).concat(right);
             },
             // create a multiple table-head
-            makeColumnRows (fixedType) {
-                return convertToRows(this.columns, fixedType);
+            makeColumnRows (fixedType, cols) {
+                return convertToRows(cols, fixedType);
             },
             setMinMaxColumnRows (){
                 let minWidthColumns=[];
@@ -964,13 +973,14 @@
             columns: {
                 handler () {
                     // todo 这里有性能问题，可能是左右固定计算属性影响的
-                    this.allColumns = getAllColumns(this.columns);
+                    const colsWithId = this.makeColumnsId(this.columns);
+                    this.allColumns = getAllColumns(colsWithId);
                     this.cloneColumns = this.makeColumns();
                     this.setMinMaxColumnRows();
-                    this.columnRows = this.makeColumnRows(false);
-                    this.leftFixedColumnRows = this.makeColumnRows('left');
-                    this.rightFixedColumnRows = this.makeColumnRows('right');
+                    this.columnRows = this.makeColumnRows(false, colsWithId);
+                    this.leftFixedColumnRows = this.makeColumnRows('left', colsWithId);
+                    this.rightFixedColumnRows = this.makeColumnRows('right', colsWithId);
                     this.rebuildData = this.makeDataWithSortAndFilter();
                     this.handleResize();
                 },
@@ -78,4 +78,16 @@ const convertToRows = (columns, fixedType = false) =&gt; {
     return rows;
 };
-export {convertToRows};
 \ No newline at end of file
+export {convertToRows};
+
+const getRandomStr = function (len = 32) {
+    const $chars = 'abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ1234567890';
+    const maxPos = $chars.length;
+    let str = '';
+    for (let i = 0; i < len; i++) {
+        str += $chars.charAt(Math.floor(Math.random() * maxPos));
+    }
+    return str;
+};
+
+export {getRandomStr};
 \ No newline at end of file