一些更新

Ben Lin

2024-08-07 439e3b0f076280311b7cd4251a95820730242780

 src/components/Table/src/components/TableHeader.vue

@@ -3,6 +3,9 @@
    <div v-if="$slots.headerTop" style="margin: 5px">
      <slot name="headerTop"></slot>
    </div>
    <div v-if="showSelectionBar" style="margin: 5px">
      <TableSelectionBar :clearSelectedRowKeys="props.clearSelectedRowKeys!" :count="props.count" />
    </div>
    <div class="flex items-center">
      <slot name="tableTitle" v-if="$slots.tableTitle"></slot>
      <TableTitle
@@ -13,7 +16,7 @@
      <div :class="`${prefixCls}__toolbar`">
        <slot name="toolbar"></slot>
        <Divider type="vertical" v-if="$slots.toolbar && showTableSetting" />
        <TableSetting
        <TableSettingComponent
          :setting="tableSetting"
          v-if="showTableSetting"
          @columns-change="handleColumnChange"
@@ -22,46 +25,50 @@
    </div>
  </div>
</template>
<script lang="ts">
  import type { TableSetting, ColumnChangeParam } from '../types/table';
<script lang="ts" setup>
  import type { TableSetting, ColumnChangeParam, TableActionType } from '../types/table';
  import type { PropType } from 'vue';
  import { defineComponent } from 'vue';
  import { Divider } from 'ant-design-vue';
  import TableSettingComponent from './settings/index.vue';
  import TableTitle from './TableTitle.vue';
  import { useDesign } from '/@/hooks/web/useDesign';
  import { useDesign } from '@/hooks/web/useDesign';
  import TableSelectionBar from '../components/TableSelectionBar.vue';

  export default defineComponent({
    name: 'BasicTableHeader',
    components: {
      Divider,
      TableTitle,
      TableSetting: TableSettingComponent,
  defineOptions({ name: 'BasicTableHeader' });

  const props = defineProps({
    title: {
      type: [Function, String] as PropType<string | ((data) => string)>,
    },
    props: {
      title: {
        type: [Function, String] as PropType<string | ((data) => string)>,
      },
      tableSetting: {
        type: Object as PropType<TableSetting>,
      },
      showTableSetting: {
        type: Boolean,
      },
      titleHelpMessage: {
        type: [String, Array] as PropType<string | string[]>,
        default: '',
      },
    tableSetting: {
      type: Object as PropType<TableSetting>,
    },
    emits: ['columns-change'],
    setup(_, { emit }) {
      const { prefixCls } = useDesign('basic-table-header');
      function handleColumnChange(data: ColumnChangeParam[]) {
        emit('columns-change', data);
      }
      return { prefixCls, handleColumnChange };
    showTableSetting: {
      type: Boolean,
    },
    titleHelpMessage: {
      type: [String, Array] as PropType<string | string[]>,
      default: '',
    },
    //
    clearSelectedRowKeys: {
      type: Function as PropType<TableActionType['clearSelectedRowKeys']>,
    },
    count: {
      type: Number,
      default: 0,
    },
    showSelectionBar: {
      type: Boolean,
      default: false,
    },
  });

  const emit = defineEmits(['columns-change']);
  const { prefixCls } = useDesign('basic-table-header');
  function handleColumnChange(data: ColumnChangeParam[]) {
    emit('columns-change', data);
  }
</script>
<style lang="less">
  @prefix-cls: ~'@{namespace}-basic-table-header';