|
{{ column.title || '' }}
@@ -67,6 +71,7 @@
import renderHeader from './header';
import Mixin from './mixin';
import Locale from '../../mixins/locale';
+ import { convertColumnOrder } from './util';
export default {
name: 'TableHead',
@@ -82,7 +87,8 @@
fixed: {
type: [Boolean, String],
default: false
- }
+ },
+ columnRows: Array
},
computed: {
styles () {
@@ -108,6 +114,25 @@
}
return isSelectAll;
+ },
+ headRows () {
+ const isGroup = this.columnRows.length > 1;
+ return isGroup ? this.columnRows : [this.columns];
+
+// if (isGroup) {
+// const fixedType = this.fixed;
+// if (fixedType) {
+// if (fixedType === 'left') {
+// return convertColumnOrder(this.columnRows, 'left');
+// } else if (fixedType === 'right') {
+// return convertColumnOrder(this.columnRows, 'right');
+// }
+// } else {
+// return this.columnRows;
+// }
+// } else {
+// return [this.columns];
+// }
}
},
methods: {
diff --git a/src/components/table/table.vue b/src/components/table/table.vue
index 824dafba..0dbc0f0b 100644
--- a/src/components/table/table.vue
+++ b/src/components/table/table.vue
@@ -7,6 +7,7 @@
:prefix-cls="prefixCls"
:styleObject="tableStyle"
:columns="cloneColumns"
+ :column-rows="columnRows"
:obj-data="objData"
:columns-width="columnsWidth"
:data="rebuildData">
@@ -43,6 +44,7 @@
:prefix-cls="prefixCls"
:styleObject="fixedTableStyle"
:columns="leftFixedColumns"
+ :column-rows="columnRows"
:obj-data="objData"
:columns-width="columnsWidth"
:data="rebuildData">
@@ -65,6 +67,7 @@
:prefix-cls="prefixCls"
:styleObject="fixedRightTableStyle"
:columns="rightFixedColumns"
+ :column-rows="columnRows"
:obj-data="objData"
:columns-width="columnsWidth"
:data="rebuildData">
@@ -97,6 +100,7 @@
import ExportCsv from './export-csv';
import Locale from '../../mixins/locale';
import elementResizeDetectorMaker from 'element-resize-detector';
+ import { getAllColumns, convertToRows, convertColumnOrder } from './util';
const prefixCls = 'ivu-table';
@@ -180,6 +184,8 @@
objData: this.makeObjData(), // checkbox or highlight-row
rebuildData: [], // for sort or filter
cloneColumns: this.makeColumns(),
+ columnRows: this.makeColumnRows(),
+ allColumns: getAllColumns(this.columns), // for multiple table-head, get columns that have no children
showSlotHeader: true,
showSlotFooter: true,
bodyHeight: 0,
@@ -308,28 +314,10 @@
return style;
},
leftFixedColumns () {
- let left = [];
- let other = [];
- this.cloneColumns.forEach((col) => {
- if (col.fixed && col.fixed === 'left') {
- left.push(col);
- } else {
- //other.push(col);
- }
- });
- return left.concat(other);
+ return convertColumnOrder(this.cloneColumns, 'left');
},
rightFixedColumns () {
- let right = [];
- let other = [];
- this.cloneColumns.forEach((col) => {
- if (col.fixed && col.fixed === 'right') {
- right.push(col);
- } else {
- //other.push(col);
- }
- });
- return right.concat(other);
+ return convertColumnOrder(this.cloneColumns, 'right');
},
isLeftFixed () {
return this.columns.some(col => col.fixed && col.fixed === 'left');
@@ -344,9 +332,9 @@
},
handleResize () {
this.$nextTick(() => {
- const allWidth = !this.columns.some(cell => !cell.width); // each column set a width
+ const allWidth = !this.allColumns.some(cell => !cell.width); // each column set a width
if (allWidth) {
- this.tableWidth = this.columns.map(cell => cell.width).reduce((a, b) => a + b, 0);
+ this.tableWidth = this.allColumns.map(cell => cell.width).reduce((a, b) => a + b, 0);
} else {
this.tableWidth = parseInt(getStyle(this.$el, 'width')) - 1;
}
@@ -614,7 +602,7 @@
this.cloneColumns[index]._sortType = type;
this.$emit('on-sort-change', {
- column: JSON.parse(JSON.stringify(this.columns[this.cloneColumns[index]._index])),
+ column: JSON.parse(JSON.stringify(this.allColumns[this.cloneColumns[index]._index])),
key: key,
order: type
});
@@ -751,7 +739,8 @@
return data;
},
makeColumns () {
- let columns = deepCopy(this.columns);
+ // 在 data 时，this.allColumns 暂时为 undefined
+ let columns = deepCopy(getAllColumns(this.columns));
let left = [];
let right = [];
let center = [];
@@ -789,6 +778,10 @@
});
return left.concat(center).concat(right);
},
+ // create a multiple table-head
+ makeColumnRows () {
+ return convertToRows(this.columns);
+ },
exportCsv (params) {
if (params.filename) {
if (params.filename.indexOf('.csv') === -1) {
@@ -804,7 +797,7 @@
columns = params.columns;
datas = params.data;
} else {
- columns = this.columns;
+ columns = this.allColumns;
if (!('original' in params)) params.original = true;
datas = params.original ? this.data : this.rebuildData;
}
@@ -863,7 +856,9 @@
columns: {
handler () {
// todo 这里有性能问题，可能是左右固定计算属性影响的
+ this.allColumns = getAllColumns(this.columns);
this.cloneColumns = this.makeColumns();
+ this.columnRows = this.makeColumnRows();
this.rebuildData = this.makeDataWithSortAndFilter();
this.handleResize();
},
diff --git a/src/components/table/util.js b/src/components/table/util.js
new file mode 100644
index 00000000..7e7e29a9
--- /dev/null
+++ b/src/components/table/util.js
@@ -0,0 +1,81 @@
+import { deepCopy } from '../../utils/assist';
+
+// set forTableHead to true when convertToRows, false in normal cases like table.vue
+const getAllColumns = (cols, forTableHead = false) => {
+ const columns = deepCopy(cols);
+ const result = [];
+ columns.forEach((column) => {
+ if (column.children) {
+ if (forTableHead) result.push(column);
+ result.push.apply(result, getAllColumns(column.children, forTableHead));
+ } else {
+ result.push(column);
+ }
+ });
+ return result;
+};
+
+export {getAllColumns};
+
+const convertToRows = (columns) => {
+ const originColumns = deepCopy(columns);
+ let maxLevel = 1;
+ const traverse = (column, parent) => {
+ if (parent) {
+ column.level = parent.level + 1;
+ if (maxLevel < column.level) {
+ maxLevel = column.level;
+ }
+ }
+ if (column.children) {
+ let colSpan = 0;
+ column.children.forEach((subColumn) => {
+ traverse(subColumn, column);
+ colSpan += subColumn.colSpan;
+ });
+ column.colSpan = colSpan;
+ } else {
+ column.colSpan = 1;
+ }
+ };
+
+ originColumns.forEach((column) => {
+ column.level = 1;
+ traverse(column);
+ });
+
+ const rows = [];
+ for (let i = 0; i < maxLevel; i++) {
+ rows.push([]);
+ }
+
+ const allColumns = getAllColumns(originColumns, true);
+
+ allColumns.forEach((column) => {
+ if (!column.children) {
+ column.rowSpan = maxLevel - column.level + 1;
+ } else {
+ column.rowSpan = 1;
+ }
+ rows[column.level - 1].push(column);
+ });
+
+ return rows;
+};
+
+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};
\ No newline at end of file
diff --git a/src/styles/components/table.less b/src/styles/components/table.less
index d6639619..fdcd2a6b 100644
--- a/src/styles/components/table.less
+++ b/src/styles/components/table.less
@@ -71,7 +71,7 @@
overflow: hidden;
}
&-body{
- //overflow: auto;
+ overflow: auto;
//position: relative;
}
@@ -285,7 +285,7 @@
box-shadow: -2px 0 6px -2px rgba(0, 0, 0, 0.2);
}
&-fixed-header{
- overflow: visible;
+ overflow: hidden;
&-with-empty{
.@{table-prefix-cls}-hidden{
.@{table-prefix-cls}-sort{
|