当前位置：首页 > article >正文

buildadmin+tp8表格操作（1）----表头上方添加按钮和自定义按钮

article 2024/11/18 14:00:26

buildAdmin 的表头上添加一些按钮，并实现功能

在这里插入图片描述

添加按钮

<template>
    <!-- buttons 属性定义了 TableHeader 本身支持的顶部按钮，仅需传递按钮名即可 -->
    <!-- 这里的框架自带的 顶部按钮  分别有 刷新 ， 添加， 编辑， 删除， 公共搜索 ， 快速搜索 ， 显示隐藏列，  -->
    <TableHeader
        :buttons="['refresh', 'add', 'edit', 'delete', 'comSearch', 'quickSearch', 'columnDisplay', 'unfold']"
        :quick-search-placeholder="t('Quick search placeholder', { fields: t('security.dataRecycleLog.Rule name') })"
    >
        <!-- 可以在此处以插槽的方式设置一些自定义按钮 -->
        
        <template #refreshPrepend>
            <!-- 刷新按钮前插槽内容 -->
        </template>

        <!-- 默认插槽 -->
        <template #default>
            <el-button v-blur :disabled="baTable.table.selection!.length > 0 ? false:true" class="table-header-operate" type="success">
                <Icon color="#ffffff" name="el-icon-RefreshRight" />
                <span class="table-header-operate-text">还原</span>
            </el-button>
        </template>

    </TableHeader>
</template>

<script>
import TableHeader from '/@/components/table/header/index.vue'
</script>