菜单更新

Ben Lin

2024-06-25 7d26ed0e19bf952e7c037b21bfd687759b46e851

 src/components/Table/src/components/HeaderCell.vue

@@ -1,17 +1,11 @@
<template>
  <EditTableHeaderCell v-if="getIsEdit">
    {{ getTitle }}
  </EditTableHeaderCell>
  <span v-else>{{ getTitle }}</span>
  <BasicHelp v-if="getHelpMessage" :text="getHelpMessage" :class="`${prefixCls}__help`" />
</template>
<script lang="ts">
<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 BasicHelp from '@/components/Basic/src/BasicHelp.vue';
  import EditTableHeaderCell from './EditTableHeaderIcon.vue';
  import { useDesign } from '/@/hooks/web/useDesign';
  import { useDesign } from '@/hooks/web/useDesign';
  import { ColumnType } from 'ant-design-vue/lib/table/interface';

  export default defineComponent({
    name: 'TableHeaderCell',
@@ -21,18 +15,37 @@
    },
    props: {
      column: {
        type: Object as PropType<BasicColumn>,
        type: Object as PropType<ColumnType<any>>,
        default: () => ({}),
      },
    },
    setup(props) {
      const { prefixCls } = useDesign('basic-table-header-cell');

      const getIsEdit = computed(() => !!props.column?.edit);
      const getTitle = computed(() => props.column?.customTitle || props.column?.title);
      const getHelpMessage = computed(() => props.column?.helpMessage);
      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 { prefixCls, getIsEdit, getTitle, getHelpMessage };
      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>
@@ -42,7 +55,6 @@
  .@{prefix-cls} {
    &__help {
      margin-left: 8px;
      color: rgb(0 0 0 / 65%) !important;
    }
  }
</style>