Fixed #1630 - Cannot create dynamic ColumnGroup columns in DataTable

pull/1751/head
Tuğçe Küçükoğlu 2021-11-10 12:01:35 +03:00
parent 4709ce7016
commit a51f26ce40
2 changed files with 30 additions and 2 deletions

View File

@ -7,7 +7,7 @@
</tr>
<template v-else>
<tr v-for="(row,i) of columnGroup.children.default()" :key="i" role="row">
<template v-for="(col,j) of row.children.default()" :key="columnProp(col,'columnKey')||columnProp(col,'field')||j">
<template v-for="(col,j) of getFooterColumns(row)" :key="columnProp(col,'columnKey')||columnProp(col,'field')||j">
<DTFooterCell :column="col" v-if="!columnProp(col,'hidden')"/>
</template>
</tr>
@ -34,6 +34,20 @@ export default {
methods: {
columnProp(col, prop) {
return ObjectUtils.getVNodeProp(col, prop);
},
getFooterColumns(row){
let cols = [];
if (row.children && row.children.default) {
row.children.default().forEach(child => {
if (child.children && child.children instanceof Array)
cols = [...cols, ...child.children];
else if (child.type.name === 'Column')
cols.push(child);
});
return cols;
}
}
},
computed: {

View File

@ -33,7 +33,7 @@
</template>
<template v-else>
<tr v-for="(row,i) of columnGroup.children.default()" :key="i" role="row">
<template v-for="(col,j) of row.children.default()" :key="columnProp(col, 'columnKey')||columnProp(col, 'field')||j">
<template v-for="(col,j) of getHeaderColumns(row)" :key="columnProp(col, 'columnKey')||columnProp(col, 'field')||j">
<DTHeaderCell v-if="!columnProp(col, 'hidden') && (rowGroupMode !== 'subheader' || (groupRowsBy !== columnProp(col, 'field'))) && (typeof col.children !== 'string')" :column="col"
@column-click="$emit('column-click', $event)" @column-mousedown="$emit('column-mousedown', $event)"
:groupRowsBy="groupRowsBy" :groupRowSortField="groupRowSortField" :sortMode="sortMode" :sortField="sortField" :sortOrder="sortOrder" :multiSortMeta="multiSortMeta"
@ -131,6 +131,20 @@ export default {
},
getFilterColumnHeaderStyle(column) {
return [this.columnProp(column, 'filterHeaderStyle'), this.columnProp(column, 'style')];
},
getHeaderColumns(row){
let cols = [];
if (row.children && row.children.default) {
row.children.default().forEach(child => {
if (child.children && child.children instanceof Array)
cols = [...cols, ...child.children];
else if (child.type.name === 'Column')
cols.push(child);
});
return cols;
}
}
},
components: {