import { defineComponent, PropType, Ref } from 'vue'
|
import { ColumnType, ScopeType, TablePropsItemType } from './BaseTable.d'
|
import styles from './BaseTable.module.scss'
|
import { isFunction, isNil } from 'lodash'
|
import AutoTooltip from './AutoTooltip'
|
|
export const ColumnSlots: (
|
props: TablePropsItemType,
|
columns: Ref<ColumnType[]>
|
) => Record<string, Function> = (props, columns: Ref<ColumnType[]>) => {
|
const slots: Record<string, Function> = {}
|
const columnsData = columns.value.filter((column) => column.field !== 'seq')
|
const getCellStyle = (data: ScopeType) =>
|
isFunction(props.cellStyle)
|
? props.cellStyle({ ...data, row: data.record })
|
: {}
|
|
const RenderSlot = ({ column, record, rowIndex }: ScopeType) => {
|
const cellStyle = getCellStyle({ column, record, rowIndex })
|
const text = isNil(record[column.field]) ? '-' : record[column.field]
|
const render = column.customRender ? column.customRender : () => <AutoTooltip text={text as string}/>
|
|
return (
|
<div class={styles.bodyCell} style={cellStyle}>
|
{render({ column, record, rowIndex })}
|
</div>
|
)
|
}
|
/**
|
* 自定义列
|
*/
|
columnsData.map((column) => {
|
slots[column.field] = RenderSlot
|
// if (isFunction(column.customRender)) {
|
|
// // slots[column.field] = ({ column, record, rowIndex }: ScopeType) => {
|
// // const cellStyle = getCellStyle({ column, record, rowIndex })
|
// // return (
|
// // <div class={styles.bodyCell} style={cellStyle}>
|
// // {render({ column, record, rowIndex })}
|
// // </div>
|
// // )
|
// // }
|
// delete column.customRender
|
// } else {
|
// slots[column.field] = ({ column, record, rowIndex }: ScopeType) => {
|
// const cellStyle = getCellStyle({ column, record, rowIndex })
|
|
// return (
|
// <div class={styles.bodyCell} style={cellStyle}>
|
// {isNil(record[column.field]) ? '-' : record[column.field]}
|
// </div>
|
// )
|
// }
|
// }
|
})
|
return slots
|
}
|
