1. The code in the template
<BasicTable @register="registerTable" :canResize="false">
<!-- 表格左边的插槽 -->
<template #tableTitle>
<div class="btn-group">
<a-button
ghost
type="primary"
preIcon="ant-design:plus-circle-outlined"
@click="handleCreate"
>新增</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>
<!-- The slot on the right side of the table -->
<!-- <template #toolbar> </template> -->
<template #action="{ record }">
<TableAction
: actions="[
{ label: 'Details', color: 'success', onClick: queryDetails.bind(null, record), }, { label: 'Edit', onClick: handleEdit.bind(null, record), }, { label: 'Delete', color: 'error', popConfirm: { title: 'Do you want to delete this data',
confirm: handleDelete.bind(null, record),
},
},
{ label: 'Generate code', color: 'warning', onClick: handleCode.bind(null, record), }, ]" /> </template> </BasicTable> Code in 2.script:
const [registerTable, { reload }] = useTable({ api: list, // request interface columns: columns, // set the table header dataSource: dataSources, // table data formConfig: { labelWidth: 80, schemas: searchFormSchema , resetFunc: resetFunc, }, pagination: true, //Display the paging at the bottom of the table clickToRowSelect: true, //Click the multi-selection box of the current row to unselect, the default is true // striped: false, //Whether zebra pattern (interlaced color change ), default true rowSelection: { type: 'checkbox' }, //Whether there is a multi-select function useSearchForm: true, //Whether there is a search function // showTableSetting: true, //Whether there is a refresh and column setting bordered: false, / / Whether to display the border
showIndexColumn: true, // Whether to display the serial number column
actionColumn: { width: 240, title: 'operation', dataIndex: 'action', slots: { customRender: 'action' }, }, });