前端表格工具栏组件

工具栏组件使用

工具栏组件一般和表格组件一起使用,只需要回调 useTable hook 中的函数即可。

<right-toolbar
  v-model:showSearch="showSearch"
  :export="'sys_user_export'"
  @exportExcel="exportExcel"
  @queryTable="getDataList"
/>
const { getDataList } = useTable(state);
使用提示

工具栏组件提供了搜索框切换、数据导出和表格刷新等常用功能,通过权限字符串可以动态控制导出按钮的显示。

卡槽扩展

<right-toolbar>
  <template #default="{ node, data }"> </template>
</right-toolbar>

属性说明

属性类型默认值说明
showSearchBooleantrue是否显示搜索框
exportString or Boolean-是否显示导出下载按钮。设置为 true 时显示,设置为权限字符串时根据当前用户权限动态控制
searchBooleantrue是否显示搜索框
gutterNumber10列表项之间的间距
权限控制

export 属性支持权限字符串,当设置为具体的权限标识(如 'sys_user_export')时,系统会根据当前用户的权限动态控制导出按钮的显示与隐藏。