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>
表頭上的默認按鈕,只需要 在 button 數組中添加相應的名稱就可以了
自定義表頭按鈕
表格頂部的按鈕,是通過表格組件中的插槽來添加的 代碼如下圖所示
從上圖,我們可以看到, 自定義的按鈕都添加上了