Game-Backstage-Management-System/src/components/table/TableTools.vue

<script setup lang="ts">
import type { TableFieldInfo, TableToolsConfig } from '@/types/table'

interface TableToolsProps {
  // 工具栏配置
  toolsConfig?: TableToolsConfig

  // 筛选
  filterFields?: boolean

  // 工具图标大小
  toolsIconSize?: number

  // 表格字段信息
  tableFieldsInfo: TableFieldInfo[]
}

const props = withDefaults(defineProps<TableToolsProps>(), {
  toolsConfig: () => {
    return {
      add: false,
      download: false,
      refresh: false,
      filterFields: false
    }
  },

  filterFields: false,
  toolsIconSize: 25
})

/**
 * 此处没有做响应式，因为工具栏一般不会动态变化
 *
 */
const { add, download, filterFields, refresh } = props.toolsConfig

const emits = defineEmits(['add', 'refresh', 'download'])
</script>

<template>
  <div class="tableToolsContainer">
    <div class="leftTools">
      <div class="leftToolsGroup" style="display: flex">
        <el-button v-if="add" class="leftToolBtn" color="#165dff" @click="emits('add')">
          <el-icon>
            <Plus />
          </el-icon>
          新增
        </el-button>
      </div>
    </div>
    <div class="rightTools">
      <el-button
        v-if="download"
        color="#f0f1f3"
        size="default"
        class="rightToolsItem"
        @click="emits('download')"
      >
        <el-icon>
          <Download />
        </el-icon>
        下载
      </el-button>

      <RefreshBtn
        v-if="refresh"
        @refresh-table="emits('refresh')"
        :icon-size="toolsIconSize"
      ></RefreshBtn>
      <FilterPopover
        v-if="filterFields"
        :table-fields-info="tableFieldsInfo"
        :icon-size="toolsIconSize"
      ></FilterPopover>
    </div>
  </div>
</template>

<style scoped>
.tableToolsContainer {
  width: 98%;
  display: flex;
  justify-content: space-between;
  margin: 1% auto 0;
}

.leftTools,
.rightTools {
  width: 10%;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.leftToolBtn {
  margin-right: 5px;
}
</style>