Thanks to visit codestin.com
Credit goes to github.com

Skip to content

perf(b-table): cache cell slot names each render cycle (addresses #4008) #4011

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 9 commits into from
Sep 4, 2019
Merged

perf(b-table): cache cell slot names each render cycle (addresses #4008) #4011

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
9 commits
Select commit Hold shift + click to select a range
0c6f5f8
perf(b-table): cache cell slot names each render
tmorehouse Sep 3, 2019
8f9337a
Merge branch 'dev' into tmorehouse/table-cache
tmorehouse Sep 3, 2019
a5c07b5
Update mixin-tbody.js
tmorehouse Sep 3, 2019
3b659bb
Update mixin-tbody.js
tmorehouse Sep 3, 2019
244e7c2
Update mixin-tbody.js
tmorehouse Sep 3, 2019
f3b9b72
Update mixin-tbody.js
tmorehouse Sep 3, 2019
1604650
Update mixin-tbody-row.js
tmorehouse Sep 3, 2019
f07bfad
Update mixin-tbody-row.js
tmorehouse Sep 4, 2019
b9d202a
Merge branch 'dev' into tmorehouse/table-cache
tmorehouse Sep 4, 2019
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
9 changes: 5 additions & 4 deletions src/components/table/helpers/mixin-tbody-row.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -205,10 +205,11 @@ export default {
// v-slot attributes are lower-cased by the browser.
// Switched to round bracket syntax to prevent confusion with
// dynamic slot name syntax.
const slotNames = [`cell(${key})`, `cell(${key.toLowerCase()})`, 'cell()']
let $childNodes = this.hasNormalizedSlot(slotNames)
? this.normalizeSlot(slotNames, slotScope)
: toString(formatted)
// We look for slots in this order: `cell(${key})`, `cell(${key.toLowerCase()})`, 'cell()'
// Slot names are now cached by mixin tbody in `this.$_bodyFieldSlotNameCache`
// Will be `null` if no slot (or fallback slot) exists
const slotName = this.$_bodyFieldSlotNameCache[key]
let $childNodes = slotName ? this.normalizeSlot(slotName, slotScope) : toString(formatted)
if (this.isStacked) {
// We wrap in a DIV to ensure rendered as a single cell when visually stacked!
$childNodes = [h('div', {}, [$childNodes])]
Expand Down
20 changes: 20 additions & 0 deletions src/components/table/helpers/mixin-tbody.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -30,6 +30,26 @@ export default {
} else {
// Table isn't busy, or we don't have a busy slot

// Create a slot cache for improved performace when looking up cell slot names.
// Values will be keyed by the field's `key` and will store the slot's name.
// Slots could be dynamic (i.e. `v-if`), so we must compute on each render.
// Used by tbodyRow mixin render helper.
const cache = {}
const defaultSlotName = this.hasNormalizedSlot('cell()') ? 'cell()' : null
this.computedFields.forEach(field => {
const key = field.key
const fullName = `cell(${key})`
const lowerName = `cell(${key.toLowerCase()})`
cache[key] = this.hasNormalizedSlot(fullName)
? fullName
: this.hasNormalizedSlot(lowerName)
? lowerName
: defaultSlotName
})
// Created as a non-reactive property so to not trigger component updates.
// Must be a fresh object each render.
this.$_bodyFieldSlotNameCache = cache

// Add static Top Row slot (hidden in visibly stacked mode as we can't control data-label attr)
$rows.push(this.renderTopRow ? this.renderTopRow() : h())

Expand Down