技巧：不同页面引入相同组件，但各自显示不同的按钮

角色管理页面只显示新增和刷新按钮

规格管理页面需要显示

通过数组判定 默认显示新增和刷新

import { computed } from 'vue';

const props = defineProps({
  layout:{
    type:String,
    // 默认只显示这两个按钮
    default:"create,refresh"
  }
})
// 将字符串转为逗号分割的数组
const btns = computed(()=>props.layout.split(","))

defineEmits(["create","refresh","delete"])

每个按钮加入v-if判定 通过includes函数判断

      <div>
        <el-button v-if="btns.includes('create')" class="ml-4" type="primary" size="small" @click="$emit('create')">
        新增
      </el-button>
      <el-button v-if="btns.includes('delete')" class="ml-4" type="danger" size="small" @click="$emit('delete')">
        批量删除
      </el-button>
      </div>
      <!-- 刷新数据 -->
      <el-tooltip v-if="btns.includes('refresh')" effect="dark" content="刷新数据" placement="top">
        <el-button @click="$emit('refresh')">
          <el-icon :size="20">
            <Refresh />
          </el-icon>
        </el-button>
      </el-tooltip>

在规格管理中定义

<ListHeader layout="create,delete,refresh" @create="handleCreate" @refresh="getData"></ListHeader>

这样即可