Update DataTable.vue
When wrapping vue components, default slots get nested inside the slot's children array. So if you attempt to pass default slots down through multiple layers, they will be nested further. See link below. Currently, the DataTable component can only be wrapped once as the computed property for columns() only checks against the children array and is not recursive. If you attempt to wrap the components inside multiple layers, it does not work. Proposed is an update to the columns computed property to make it recursive. https://sfc.vuejs.org/#eyJBcHAudnVlIjoiPHNjcmlwdCBzZXR1cD5cbmltcG9ydCBHcmFuZFBhcmVudCBmcm9tICcuL0dyYW5kUGFyZW50LnZ1ZSc7XG5cblxuPC9zY3JpcHQ+XG5cbjx0ZW1wbGF0ZT5cbiAgPGgxPkdyZWF0R3JhbmRQYXJlbnQ8L2gxPlxuICA8R3JhbmRQYXJlbnQ+XG4gIFx0PHNwYW4+Q29sdW1uIDE8L3NwYW4+XG4gICAgPHNwYW4+Q29sdW1uIDI8L3NwYW4+XG4gICAgPHNwYW4+Q29sdW1uIDM8L3NwYW4+XG4gICAgPHRlbXBsYXRlICNjdXN0b20+XG4gICAgXHQ8c3Bhbj5DdXN0b20gMTwvc3Bhbj5cbiAgICAgIDxzcGFuPkN1c3RvbSAyPC9zcGFuPlxuICAgIDwvdGVtcGxhdGU+XG4gIDwvR3JhbmRQYXJlbnQ+XG48L3RlbXBsYXRlPiIsImltcG9ydC1tYXAuanNvbiI6IntcbiAgXCJpbXBvcnRzXCI6IHtcbiAgICBcInZ1ZVwiOiBcImh0dHBzOi8vdW5wa2cuY29tL0B2dWUvcnVudGltZS1kb21AMy4yLjIwL2Rpc3QvcnVudGltZS1kb20uZXNtLWJyb3dzZXIuanNcIlxuICB9XG59IiwiQ2hpbGQudnVlIjoiPHRlbXBsYXRlPlxuICA8aDM+XG4gICAgQ2hpbGRcbiAgPC9oMz5cbjwvdGVtcGxhdGU+XG5cbjxzY3JpcHQ+XG5leHBvcnQgZGVmYXVsdCB7XG4gIG5hbWU6ICdDaGlsZCcsXG4gIG1vdW50ZWQoKSB7XG4gICAgY29uc29sZS5sb2coJ0NoaWxkIGRlZmF1bHQgc2xvdHMnLCB0aGlzLiRzbG90cy5kZWZhdWx0KCkpO1xuICAgIGNvbnNvbGUubG9nKCdDaGlsZCBjdXN0b20gc2xvdHMnLCB0aGlzLiRzbG90cy5jdXN0b20oKSk7XG4gICAgY29uc29sZS5sb2coJ0dldCBjb2x1bW5zJywgdGhpcy5jb2x1bW5zKCkpO1xuICB9LFxuICBtZXRob2RzOiB7XG4gICAgY29sdW1ucygpIHtcbiAgICAgIGxldCBjb2xzID0gW107XG4gICAgICBsZXQgY2hpbGRyZW4gPSB0aGlzLiRzbG90cy5kZWZhdWx0KCk7XG5cbiAgICAgIGlmICghY2hpbGRyZW4pIHtcbiAgICAgICAgcmV0dXJuO1xuICAgICAgfVxuXG4gICAgICBjaGlsZHJlbi5mb3JFYWNoKGNoaWxkID0+IHtcbiAgICAgICAgaWYgKGNoaWxkLmNoaWxkcmVuICYmIGNoaWxkLmNoaWxkcmVuIGluc3RhbmNlb2YgQXJyYXkpXG4gICAgICAgICAgY29scyA9IFsuLi5jb2xzLCAuLi5jaGlsZC5jaGlsZHJlbl07XG4gICAgICAgIGVsc2UgaWYgKGNoaWxkLnR5cGUubmFtZSA9PT0gJ0NvbHVtbicpXG4gICAgICAgICAgY29scy5wdXNoKGNoaWxkKTtcbiAgICAgIH0pO1xuICAgICAgcmV0dXJuIGNvbHM7XG4gICAgfVxuICB9XG59XG48L3NjcmlwdD4iLCJQYXJlbnQudnVlIjoiPHRlbXBsYXRlPlxuXHQ8aDM+UGFyZW50PC9oMz5cbiAgPENoaWxkPlxuICAgIDx0ZW1wbGF0ZSB2LWZvcj1cIihpbmRleCwgbmFtZSkgaW4gJHNsb3RzXCIgdi1zbG90OltuYW1lXT5cbiAgICBcdDxzbG90IDpuYW1lPVwibmFtZVwiPjwvc2xvdD5cblx0XHQ8L3RlbXBsYXRlPlxuICA8L0NoaWxkPlxuPC90ZW1wbGF0ZT5cblxuPHNjcmlwdD5cbmltcG9ydCBDaGlsZCBmcm9tICcuL0NoaWxkLnZ1ZSc7XG5leHBvcnQgZGVmYXVsdCB7XG4gIG5hbWU6ICdQYXJlbnQnLFxuICBjb21wb25lbnRzOiB7IENoaWxkIH0sXG4gIG1vdW50ZWQoKSB7XG4gICAgY29uc29sZS5sb2coJ1BhcmVudCBkZWZhdWx0IHNsb3RzJywgdGhpcy4kc2xvdHMuZGVmYXVsdCgpKTtcbiAgICBjb25zb2xlLmxvZygnUGFyZW50IGN1c3RvbSBzbG90cycsIHRoaXMuJHNsb3RzLmN1c3RvbSgpKTtcbiAgfSxcbn1cbjwvc2NyaXB0PiIsIkdyYW5kUGFyZW50LnZ1ZSI6Ijx0ZW1wbGF0ZT5cblx0PGgzPkdyYW5kUGFyZW50PC9oMz5cbiAgPFBhcmVudD5cbiAgICA8dGVtcGxhdGUgdi1mb3I9XCIoaW5kZXgsIG5hbWUpIGluICRzbG90c1wiIHYtc2xvdDpbbmFtZV0+XG4gICAgXHQ8c2xvdCA6bmFtZT1cIm5hbWVcIj48L3Nsb3Q+XG5cdFx0PC90ZW1wbGF0ZT5cbiAgPC9QYXJlbnQ+XG48L3RlbXBsYXRlPlxuXG48c2NyaXB0PlxuaW1wb3J0IFBhcmVudCBmcm9tICcuL1BhcmVudC52dWUnO1xuZXhwb3J0IGRlZmF1bHQge1xuICBuYW1lOiAnR3JhbmRQYXJlbnQnLFxuICBjb21wb25lbnRzOiB7IFBhcmVudCB9LFxuICBtb3VudGVkKCkge1xuICAgIGNvbnNvbGUubG9nKCdHcmFuZFBhcmVudCBkZWZhdWx0IHNsb3RzJywgdGhpcy4kc2xvdHMuZGVmYXVsdCgpKTtcbiAgICBjb25zb2xlLmxvZygnR3JhbmRQYXJlbnQgY3VzdG9tIHNsb3RzJywgdGhpcy4kc2xvdHMuY3VzdG9tKCkpO1xuICB9LFxufVxuPC9zY3JpcHQ+In0=pull/1726/head
parent
0d049b4ca0
commit
9b7db214b6
|
@ -1746,7 +1746,22 @@ export default {
|
||||||
document.head.removeChild(this.styleElement);
|
document.head.removeChild(this.styleElement);
|
||||||
this.styleElement = null;
|
this.styleElement = null;
|
||||||
}
|
}
|
||||||
}
|
},
|
||||||
|
recursiveGetChildren(children, results) {
|
||||||
|
if (!results) {
|
||||||
|
results = [];
|
||||||
|
}
|
||||||
|
if (children && children.length) {
|
||||||
|
children.forEach((child) => {
|
||||||
|
if (child.children instanceof Array) {
|
||||||
|
results.concat(this.recursiveGetChildren(child.children, results));
|
||||||
|
} else if (child.type.name == 'Column') {
|
||||||
|
results.push(child);
|
||||||
|
}
|
||||||
|
});
|
||||||
|
}
|
||||||
|
return results;
|
||||||
|
},
|
||||||
},
|
},
|
||||||
computed: {
|
computed: {
|
||||||
containerClass() {
|
containerClass() {
|
||||||
|
@ -1771,19 +1786,13 @@ export default {
|
||||||
];
|
];
|
||||||
},
|
},
|
||||||
columns() {
|
columns() {
|
||||||
let cols = [];
|
|
||||||
let children = this.getChildren();
|
let children = this.getChildren();
|
||||||
|
|
||||||
if (!children) {
|
if (!children) {
|
||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
|
|
||||||
children.forEach(child => {
|
const cols = this.recursiveGetChildren(children, []);
|
||||||
if (child.children && child.children instanceof Array)
|
|
||||||
cols = [...cols, ...child.children];
|
|
||||||
else if (child.type.name === 'Column')
|
|
||||||
cols.push(child);
|
|
||||||
});
|
|
||||||
|
|
||||||
if (this.reorderableColumns && this.d_columnOrder) {
|
if (this.reorderableColumns && this.d_columnOrder) {
|
||||||
let orderedColumns = [];
|
let orderedColumns = [];
|
||||||
|
|
Loading…
Reference in New Issue