sound_ai/src/components/Table/components/ztTableHeader.vue

<template>
  <div class="w-full" :class="`${prefixCls}__header`">
    <div class="flex items-center">
      <slot name="tableTitle" v-if="$slots.tableTitle"></slot>
      <ZtTableHeaderTitle
        :helpMessage="titleHelpMessage"
        :title="title"
        v-if="!$slots.tableTitle && title"
      />
      <div :class="`${prefixCls}__toolbar`">
        <slot name="toolbar"></slot>
        <ElDivider direction="vertical" v-if="$slots.toolbar && showTableSetting"  class="setting-vertical"/>
        <ZtTableSetting :setting="tableSetting" v-if="showTableSetting" />
        <!--  <TableSettingComponent :setting="tableSetting" v-if="showTableSetting" @columns-change="handleColumnChange" /> -->
      </div>
    </div>
  </div>
</template>
<script lang="ts" setup>
import { useDesign } from '@/hooks/web/useDesign'
import ZtTableHeaderTitle from './ztTableHeaderTitle.vue'
import { TableSetting } from '@/types/table'
import ZtTableSetting from './ztTableSetting.vue'
import { ElDivider } from 'element-plus'

const { getPrefixCls } = useDesign()

const prefixCls = getPrefixCls('table')

defineOptions({
  name: 'ZtTableHeader',
  inheritAttrs: false
})

const props = withDefaults(
  defineProps<{
    title?: string | ((data: Recordable) => string) //标题
    tableSetting?: TableSetting // 设置显示的按钮
    titleHelpMessage?: string | string[]
    showTableSetting?: boolean
  }>(),
  {
    title: '',
    tableSetting: undefined,
    titleHelpMessage: '',
    showTableSetting: true
  }
)


</script>
<style lang="scss" scoped>
$prefix-cls: #{$namespace}-table;

.#{$prefix-cls}__header {
  background-color: var(--el-table-bg-color);
  padding-bottom: 8px;
}

.#{$prefix-cls}__toolbar {
  display: flex;
  flex: 1;
  align-items: center;
  justify-content: flex-end;
  .setting-vertical{
    margin: 0 10px;
  }
}
</style>