import { TableData } from '@arco-design/web-vue'
|
import { computed, nextTick, onMounted, SetupContext } from 'vue'
|
import styles from './BaseTable.module.scss'
|
import { injectState } from './useState'
|
import { ColumnType, ScopeType, TablePropsItemType } from './BaseTable.d'
|
import { debounce, isFunction } from 'lodash'
|
|
export const useHook = (props: TablePropsItemType, ctx: SetupContext) => {
|
const { currentRow, dataSource, rowId, currentHeight, baseTableRef } =
|
injectState()
|
|
/**
|
* 获取行的样式名称
|
* @param record
|
* @param rowIndex
|
* @returns
|
*/
|
const getRowClassName = (record: TableData, rowIndex: number) => {
|
if (record === currentRow.value) {
|
return styles.baseTableRow
|
}
|
}
|
/**
|
* 获取style
|
*/
|
const getTableStyle = () => {
|
return {
|
...props.style,
|
'--base-row-background': props.hightLightRow,
|
}
|
}
|
/**
|
* 设置当前行高亮
|
* @param key id
|
*/
|
const setCurrentRow = (key: string) => {
|
const row = dataSource.value.find((item) => item[rowId.value] === key)
|
if (row) {
|
currentRow.value = row
|
}
|
}
|
|
onMounted(() => {
|
if (baseTableRef.value) {
|
const fn = debounce((entries: any) => {
|
const entry = entries[0]
|
const borderBoxSize = entry.borderBoxSize[0] || {}
|
currentHeight.value = borderBoxSize.blockSize
|
}, 150)
|
const resizeObserver = new ResizeObserver(fn)
|
resizeObserver.observe(baseTableRef.value)
|
}
|
})
|
|
const autoHeight = computed(() => {
|
const height = currentHeight.value
|
if (baseTableRef.value) {
|
const rect = baseTableRef.value.getBoundingClientRect()
|
const rectHeight = height || rect.height
|
return rectHeight > 42 ? rectHeight - 42 : rectHeight
|
}
|
})
|
|
ctx.expose({
|
setCurrentRow,
|
})
|
return {
|
getRowClassName,
|
getTableStyle,
|
autoHeight,
|
}
|
}
|
