Ben Lin
2024-08-22 436b52186129e60ba72c20e43d2845bc3f899901
src/components/Table/src/components/settings/index.vue
@@ -6,61 +6,52 @@
      v-if="getSetting.setting"
      @columns-change="handleColumnChange"
      :getPopupContainer="getTableContainer"
      :cache="getSetting.settingCache"
    />
    <FullScreenSetting v-if="getSetting.fullScreen" :getPopupContainer="getTableContainer" />
  </div>
</template>
<script lang="ts">
<script lang="ts" setup>
  import type { PropType } from 'vue';
  import type { TableSetting, ColumnChangeParam } from '../../types/table';
  import { defineComponent, computed, unref } from 'vue';
  import { computed, unref } from 'vue';
  import ColumnSetting from './ColumnSetting.vue';
  import SizeSetting from './SizeSetting.vue';
  import RedoSetting from './RedoSetting.vue';
  import FullScreenSetting from './FullScreenSetting.vue';
  import { useI18n } from '/@/hooks/web/useI18n';
  import { useTableContext } from '../../hooks/useTableContext';
  export default defineComponent({
    name: 'TableSetting',
    components: {
      ColumnSetting,
      SizeSetting,
      RedoSetting,
      FullScreenSetting,
    },
    props: {
      setting: {
        type: Object as PropType<TableSetting>,
        default: () => ({}),
      },
    },
    emits: ['columns-change'],
    setup(props, { emit }) {
      const { t } = useI18n();
      const table = useTableContext();
  defineOptions({ name: 'TableSetting' });
      const getSetting = computed((): TableSetting => {
        return {
          redo: true,
          size: true,
          setting: true,
          fullScreen: false,
          ...props.setting,
        };
      });
      function handleColumnChange(data: ColumnChangeParam[]) {
        emit('columns-change', data);
      }
      function getTableContainer() {
        return table ? unref(table.wrapRef) : document.body;
      }
      return { getSetting, t, handleColumnChange, getTableContainer };
  const props = defineProps({
    setting: {
      type: Object as PropType<TableSetting>,
      default: () => ({}),
    },
  });
  const emit = defineEmits(['columns-change']);
  const table = useTableContext();
  const getSetting = computed((): TableSetting => {
    return {
      redo: true,
      size: true,
      setting: true,
      settingCache: false,
      fullScreen: false,
      ...props.setting,
    };
  });
  function handleColumnChange(data: ColumnChangeParam[]) {
    emit('columns-change', data);
  }
  function getTableContainer() {
    return table ? unref(table.wrapRef) : document.body;
  }
</script>
<style lang="less">
  .table-settings {