<script lang="tsx">
|
import type { PropType } from 'vue';
|
import type { BasicColumn } from '../types/table';
|
import { defineComponent, computed } from 'vue';
|
import BasicHelp from '@/components/Basic/src/BasicHelp.vue';
|
import EditTableHeaderCell from './EditTableHeaderIcon.vue';
|
import { useDesign } from '@/hooks/web/useDesign';
|
import { ColumnType } from 'ant-design-vue/lib/table/interface';
|
|
export default defineComponent({
|
name: 'TableHeaderCell',
|
components: {
|
EditTableHeaderCell,
|
BasicHelp,
|
},
|
props: {
|
column: {
|
type: Object as PropType<ColumnType<any>>,
|
default: () => ({}),
|
},
|
},
|
setup(props) {
|
const { prefixCls } = useDesign('basic-table-header-cell');
|
|
const getIsEdit = computed(() => !!(props.column as BasicColumn)?.edit);
|
const getTitle = computed(() => {
|
const column = props.column as BasicColumn;
|
if (typeof column.customHeaderRender === 'function') {
|
return column.customHeaderRender(column);
|
}
|
return column?.customTitle || props.column?.title;
|
});
|
const getHelpMessage = computed(() => (props.column as BasicColumn)?.helpMessage);
|
|
return () => {
|
return (
|
<div>
|
{getIsEdit.value ? (
|
<EditTableHeaderCell>{getTitle.value}</EditTableHeaderCell>
|
) : (
|
<span class="default-header-cell">{getTitle.value}</span>
|
)}
|
{getHelpMessage.value && (
|
<BasicHelp text={getHelpMessage.value} class={`${prefixCls}__help`} />
|
)}
|
</div>
|
);
|
};
|
},
|
});
|
</script>
|
<style lang="less">
|
@prefix-cls: ~'@{namespace}-basic-table-header-cell';
|
|
.@{prefix-cls} {
|
&__help {
|
margin-left: 8px;
|
}
|
}
|
</style>
|
