Skip to content
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

Jump to bottom

fix: q-table bug - selection mode missing when body/header slot, no need for qtr qtd/qth #16183

Open
wants to merge 2 commits into
base: dev
Choose a base branch
from
Open

fix: q-table bug - selection mode missing when body/header slot, no need for qtr qtd/qth #16183

Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
d9af8ff
fix QTable bug when selection mode with body/header slot
cicin411 Aug 10, 2023
84bb51b
fix the bug , no need for qtr qtd/qth when in selection mode with bod…
cicin411 Aug 11, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
187 changes: 116 additions & 71 deletions ui/src/components/table/QTable.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -378,56 +378,76 @@ export default createComponent({
]
}

function getTBodyTR (row, bodySlot, pageIndex) {
const
key = getRowKey.value(row),
function getTBodyTR (row, bodySlot, pageIndex) {
const key = getRowKey.value(row),
selected = isRowSelected(key)
let selectionNode = null

if (hasSelectionMode.value === true) {
const slot = slots[ 'body-selection' ]
const content
= slot !== void 0
? slot(getBodySelectionScope({ key, row, pageIndex }))
: [
h(QCheckbox, {
modelValue: selected,
color: props.color,
dark: isDark.value,
dense: props.dense,
'onUpdate:modelValue': (adding, evt) => {
updateSelection([ key ], [ row ], adding, evt)
}
})
]

selectionNode = h('td', { class: 'q-table--col-auto-width' }, content)
}

// fixed selection bug with body slot, trNode iss children type ┄┄ () => h('q-tr') []
if (bodySlot !== void 0) {
return bodySlot(
getBodyScope({
key,
row,
pageIndex,
__trClass: selected ? 'selected' : ''
})
)
const bodyNodes = bodySlot(getBodyScope({ key, row, pageIndex, __trClass: selected ? 'selected' : '' }))
const trNode = bodyNodes[ 0 ]

if (hasSelectionMode.value === true && selectionNode) {
if (trNode.children && typeof trNode.children.default === 'function' && trNode.type.name === 'QTr') {
const originalDefaultSlot = trNode.children.default
// Lazy evaluation keep compatibility after bug fixes
trNode.children.default = () => {
console.log('ccc_1', originalDefaultSlot)
const originalChildren = originalDefaultSlot()

// Check if the originalChildren length is less than expected
// Adjust this check based on your exact requirements
if (originalChildren[ 0 ].children.length === computedCols.value.length) {
return [ selectionNode, ...originalChildren ]
}
// If length is as expected, return originalChildren
return originalChildren
}
}
}
return bodyNodes
}

const
bodyCell = slots[ 'body-cell' ],
child = computedCols.value.map(col => {
const
bodyCellCol = slots[ `body-cell-${ col.name }` ],
slot = bodyCellCol !== void 0 ? bodyCellCol : bodyCell

return slot !== void 0
? slot(getBodyCellScope({ key, row, pageIndex, col }))
: h('td', {
const bodyCell = slots[ 'body-cell' ]
const child = computedCols.value.map(col => {
const bodyCellCol = slots[ `body-cell-${ col.name }` ]
const slot = bodyCellCol !== void 0 ? bodyCellCol : bodyCell

return slot !== void 0
? slot(getBodyCellScope({ key, row, pageIndex, col }))
: h(
'td',
{
class: col.__tdClass(row),
style: col.__tdStyle(row)
}, getCellValue(col, row))
})
},
getCellValue(col, row)
)
})

if (hasSelectionMode.value === true) {
const slot = slots[ 'body-selection' ]
const content = slot !== void 0
? slot(getBodySelectionScope({ key, row, pageIndex }))
: [
h(QCheckbox, {
modelValue: selected,
color: props.color,
dark: isDark.value,
dense: props.dense,
'onUpdate:modelValue': (adding, evt) => {
updateSelection([ key ], [ row ], adding, evt)
}
})
]

child.unshift(
h('td', { class: 'q-table--col-auto-width' }, content)
)
child.unshift(selectionNode)
}

const data = { key, class: { selected } }
Expand Down Expand Up @@ -627,52 +647,77 @@ export default createComponent({
}

function getTHeadTR () {
const
header = slots.header,
const header = slots.header,
headerCell = slots[ 'header-cell' ]
let selectionNode

if (singleSelection.value === true && props.grid !== true) {
selectionNode = h('th', { class: 'q-table--col-auto-width' }, ' ')
}
else if (multipleSelection.value === true) {
const slot = slots[ 'header-selection' ]
const content
= slot !== void 0
? slot(getHeaderScope({}))
: [
h(QCheckbox, {
color: props.color,
modelValue: headerSelectedValue.value,
dark: isDark.value,
dense: props.dense,
'onUpdate:modelValue': onMultipleSelectionSet
})
]
selectionNode = h('th', { class: 'q-table--col-auto-width' }, content)
}

if (header !== void 0) {
return header(
getHeaderScope({ header: true })
).slice()
const headerNodes = header(getHeaderScope({ header: true })).slice()
const trNode = headerNodes[ 0 ]

if (hasSelectionMode.value === true && selectionNode) {
if (trNode.children && typeof trNode.children.default === 'function' && trNode.type.name === 'QTr') {
const originalDefaultSlot = trNode.children.default

// Lazy evaluation keep compatibility after bug fixes
trNode.children.default = () => {
const originalChildren = originalDefaultSlot()

// Check if the originalChildren length is less than expected
// Adjust this check based on your exact requirements
if (originalChildren[ 0 ].children.length === computedCols.value.length) {
return [ selectionNode, ...originalChildren ]
}
// If length is as expected, return originalChildren
return originalChildren
}
}
}
return headerNodes.slice()
}

const child = computedCols.value.map(col => {
const
headerCellCol = slots[ `header-cell-${ col.name }` ],
const headerCellCol = slots[ `header-cell-${ col.name }` ],
slot = headerCellCol !== void 0 ? headerCellCol : headerCell,
props = getHeaderScope({ col })

return slot !== void 0
? slot(props)
: h(QTh, {
key: col.name,
props
}, () => col.label)
: h(
QTh,
{
key: col.name,
props
},
() => col.label
)
})

if (singleSelection.value === true && props.grid !== true) {
child.unshift(
h('th', { class: 'q-table--col-auto-width' }, ' ')
)
child.unshift(h('th', { class: 'q-table--col-auto-width' }, ' '))
}
else if (multipleSelection.value === true) {
const slot = slots[ 'header-selection' ]
const content = slot !== void 0
? slot(getHeaderScope({}))
: [
h(QCheckbox, {
color: props.color,
modelValue: headerSelectedValue.value,
dark: isDark.value,
dense: props.dense,
'onUpdate:modelValue': onMultipleSelectionSet
})
]

child.unshift(
h('th', { class: 'q-table--col-auto-width' }, content)
)
child.unshift(selectionNode)
}

return [
Expand Down