vben-admin BasicTable 组件当中的插槽 之 #tableTitle

---

前言

vben admin 的 BasicTable 当中有很多插槽,这里介绍了列表标题的-- 表格左边的插槽<template #tableTitle>

一、页面代码

  <BasicTable @register="registerTable">
    <!-- 列表标题的 表格左边的插槽 -->
    <template #tableTitle>
      <Icon icon="ant-design:book-outlined" class="m-1 pr-1" />  <!--注意这里如果使用 Icon 需要在 ts 中引入的-->
      <span> 参数管理</span>
      <div>
        <a-button ghost type="primary" preIcon="ant-design:plus-circle-outlined">新增</a-button>
        <a-button ghost type="success" preIcon="ant-design:vertical-align-bottom-outlined">导入</a-button>
        <a-button ghost type="warning" preIcon="ant-design:upload-outlined">导出</a-button>
        <a-button ghost type="danger" preIcon="ant-design:delete-outlined">删除</a-button>
      </div>
    </template>
  </BasicTable>

<script lang="ts">
  import { defineComponent } from 'vue';
  import { BasicTable, useTable } from '/@/components/Table';
  import { getBasicColumns2 } from './tableData';
  import { getSimDataList } from '/@/api/test/mock';
  import { Icon } from '/@/components/Icon';
  export default defineComponent({
    name: 'ViewsTableTestBasicTableTest01',
    components: { BasicTable },
  });
</script>
<script lang="ts" setup>
  const columns = getBasicColumns2();
  const [registerTable] = useTable({
    api: getSimDataList,
    columns: columns,
    showTableSetting: true,
    canResize: true,
  });
</script>

二、实现效果