先上代码(局部解析):
<template>
<div>
<BasicTable @register="registerTable">
<template #toolbar> (表格上方的按钮)
<a-button
:preIcon="IconEnum.ADD"
v-auth="AgentConfigAuth.ADD"
@click="handleCreate"
type="primary"
>
新增
</a-button>
<a-button
:preIcon="IconEnum.DELETE"
v-auth="AgentConfigAuth.DELETE"
@click="handleDelete"
type="primary"
color="error"
>
删除
</a-button>
</template>
<template #action="{ record }">
//操作列中的按钮
<TableAction
:actions="[
{
icon: IconEnum.VIEW,
tooltip: '查看',
auth: AgentConfigAuth.SINGLE,
onClick: handleView.bind(null, record),
},
{
icon: IconEnum.EDIT,
tooltip: '编辑',
auth: AgentConfigAuth.EDIT,
onClick: handleEdit.bind(null, record),
},
{
icon: IconEnum.DELETE,
tooltip: '删除',
auth: AgentConfigAuth.DELETE,
color: 'error',
onClick: handleDelete.bind(null, record),
},
]"
/>
</template>
<template #expandedRowRender="{ record }">
<div>
//折叠事件,可以添加表格或者表单等等,但折叠事件依赖于key值。不是id值。个人建议如果没有key值的话可以自行重新自定义key值,否则。折叠无效
</template>
</BasicTable>
<AgentConfigModal @register="registerModal" @success="handleSuccess"/>
</div>
</template>
<template #headerTop>
//表格上方,搜索表单下方位置(表格左上方标题位置上方)
</template>
<template #productName="{record}"> //插槽(在ts文件对应位置记得添加插槽命名)
<span style="text-align:left;display:inline-block">商品编号:{{record.productSn}}</span>
</template>
<script lang="ts">
import {listAgentConfigApi, delAgentConfigApi} from '/@/api/virtual/virtual/agentConfig';
import {useModal} from '/@/components/Modal';
import {useMessage} from '/@/hooks/web/useMessage';
import {IconEnum} from '/@/enums/appEnum';
import {BasicTable, TableAction, useTable} from '/@/components/Table';
import {AgentConfigAuth} from '/@/auth/virtual';
import {columns, searchFormSchema} from './agentConfig.data';
import {AgentConfigDetailGo} from '/@/enums/virtual';
import AgentConfigModal from './AgentConfigModal.vue';
import {useUserStore} from '/@/store/modules/user';
import {defineComponent, reactive} from 'vue';
export default defineComponent({
name: 'AgentConfigManagement',
components: {BasicTable, AgentConfigModal, TableAction},
setup() {
const {createMessage, createConfirm} = useMessage();
const [registerModal, {openModal}] = useModal();
const state = reactive<{
ids: (string | number)[];
idNames: string;
}>({
ids: [],
idNames: '',
});
const [registerTable, {reload}] = useTable({
title: 'XXX列表', //表格左上方的标题
api: listAgentConfigApi,
striped: false,
useSearchForm: true,
rowKey: 'id',
bordered: true,
showIndexColumn: true,
columns,
formConfig: {
labelWidth: 120,
schemas: searchFormSchema,
},
showTableSetting: true, //表格左上方的设置
tableSetting: {
fullScreen: true,
},
//如果不需要操作列。直接注释掉或者去掉就好了
actionColumn: {
width: 220,
title: '操作',
dataIndex: 'action',
slots: {customRender: 'action'},
},
rowSelection: {
onChange: (selectedRowKeys, selectRows) => {
state.ids = selectedRowKeys;
state.idNames = selectRows
.map((item) => {
return item.id;
})
.join(',');
},
},
//请求之前对参数进行处理
beforeFetch: (data) => {
if (data.agentuserId) {
data.userId = data.agentuserId
}
if (data.supuserId) {
data.userId = data.supuserId
}
if (data.remark) {
data.remark = data.remark.split(" ")[0]
}
return data
},
//请求之后对返回值进行处理
afterFetch: (data) => {
data.forEach((item) => {
item.createTime = item.createTime.split(" ")[0]
})
},
//开启表单后,在请求之前处理搜索条件参数
handleSearchInfoFn:(data)=>{
}
});
/** 查看按钮 */
function handleView(record: Recordable) {
useUserStore().getRoutePath(AgentConfigDetailGo, record.id);
}
/** 新增按钮 */
function handleCreate() {
openModal(true, {
isUpdate: false,
});
}
/** 修改按钮 */
function handleEdit(record: Recordable) {
openModal(true, {
record,
isUpdate: true,
});
}
/** 删除按钮 */
function handleDelete(record: Recordable) {
const delIds = record.id || state.ids;
const delNames = record.id || state.idNames;
if (!record.id && state.ids.length === 0) {
createMessage.warning('请选择要操作的数据!');
} else {
createConfirm({
iconType: 'warning',
title: '提示',
content: '是否确定要删除' + delNames + '?',
onOk: () =>
delAgentConfigApi(delIds).then(() => {
createMessage.success('删除' + delNames + '成功!');
reload();
}),
});
}
}
function handleSuccess() {
reload();
}
return {
IconEnum,
AgentConfigAuth,
registerTable,
registerModal,
handleView,
handleCreate,
handleEdit,
handleDelete,
handleSuccess,
};
},
});
</script>
点1:使用此框架都有对应的代码生成。基本代码框架是这样式的,可根据需求调整。
点2:使用的方法在官网都有,只不过是使用比较多的,我写了对应的示例,可自行转换。
点3:因目前项目是需要此方面的知识,所以正在学习,如遇其他问题,可探讨(本人也是踩坑)。
点4:可参考vbenadmin的官网http://doc.vvbin.cn/components/table.html#props
ant design vue的官网Ant Design Vue
编写者自发的示例网址Vben Admin
贴下图片:
对应ts文件(辅助,和以上vue文件不是一个。只是功能比较多。代为参考):
以上内容,均只是参考。根据不同的功能点写法不一致(文章不详细表现)