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
Ryan O'Hern 2021-11-04 14:14:39 -04:00 committed by GitHub
parent 0d049b4ca0
commit 9b7db214b6
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
1 changed files with 17 additions and 8 deletions

View File

@ -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 = [];