test/datacap
1
0
Fork 0
mirror of https://gitee.com/devlive-community/datacap.git synced 2024-12-03 04:27:56 +08:00
Code Issues Actions 3 Packages Projects Releases Wiki Activity

[Core] [DataSet] [Visual] Add table cell tooltip

Browse Source
This commit is contained in:
qianmoQ 2024-01-09 22:35:07 +08:00
parent 697e712d86
commit 183c0efc5a
1 changed files with 20 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

22
core/datacap-web/src/components/visual/components/VisualTable.vue
View File

@ -23,9 +23,27 @@ export default {
const columns = createdTableHeader(this.configuration.headers)
const options = {
records: this.configuration.columns,
columns
columns,
hover: {
highlightMode: 'row' as const
},
tooltip: {
isShowOverflowTextTooltip: true,
}
}
window['tableInstance'] = new VTable.ListTable(document.getElementById('content'), options)
const tableInstance = new VTable.ListTable(document.getElementById('content'), options)
window['tableInstance'] = tableInstance
// Add cell tooltip
tableInstance.on('mouseenter_cell', (args) => {
const {col, row} = args;
const rect = tableInstance.getVisibleCellRangeRelativeRect({col, row});
tableInstance.showTooltip(col, row, {
content: `${tableInstance.getHeaderField(col, row)} : ${tableInstance.getCellValue(col, row)}`,
referencePosition: {rect, placement: VTable.TYPES.Placement.right},
className: 'defineTooltip',
style: {bgColor: 'black', color: 'white', arrowMark: true}
})
})
})
}
}