101 lines
2.5 KiB
Plaintext
101 lines
2.5 KiB
Plaintext
<template>
|
|
<a-card :bordered="false" class="proCard">
|
|
<BasicTable
|
|
leftTitle="表格列表"
|
|
leftTitleTooltip="这是一个提示"
|
|
:columns="columns"
|
|
:request="loadDataTable"
|
|
:row-key="(row) => row.id"
|
|
ref="actionRef"
|
|
:actionColumn="actionColumn"
|
|
>
|
|
<template #toolbar>
|
|
<a-button type="primary" @click="reloadTable">刷新数据</a-button>
|
|
</template>
|
|
|
|
<template #bodyCell="{ column, record }">
|
|
<template v-if="column.key === 'action'">
|
|
<TableAction
|
|
:actions="[
|
|
{
|
|
label: '删除',
|
|
danger: true,
|
|
type: 'primary',
|
|
size: 'middle',
|
|
icon: renderIcon(DeleteOutlined),
|
|
popConfirm: {
|
|
title: '您真的，确定要删除吗？',
|
|
okText: '确定',
|
|
cancelText: '取消',
|
|
confirm: handleDelete.bind(null, record),
|
|
},
|
|
},
|
|
{
|
|
label: '编辑',
|
|
type: 'primary',
|
|
size: 'middle',
|
|
icon: renderIcon(FormOutlined),
|
|
onClick: handleEdit.bind(null, record),
|
|
},
|
|
]"
|
|
/>
|
|
</template>
|
|
</template>
|
|
</BasicTable>
|
|
</a-card>
|
|
</template>
|
|
|
|
<script lang="ts" setup>
|
|
import { reactive, ref } from 'vue';
|
|
import { BasicTable, TableAction } from '@/components/Table';
|
|
import { getTableList } from '@/api/table/list';
|
|
import { columns } from './basicColumns';
|
|
import { Modal, message } from 'ant-design-vue';
|
|
import { DeleteOutlined, FormOutlined } from '@ant-design/icons-vue';
|
|
import { renderIcon } from '@/utils';
|
|
|
|
const actionRef = ref();
|
|
|
|
const params = reactive({
|
|
pageSize: 5,
|
|
name: 'xiaoMa',
|
|
});
|
|
|
|
const actionColumn = reactive({
|
|
width: 200,
|
|
title: '操作',
|
|
key: 'action',
|
|
fixed: 'right',
|
|
align: 'center',
|
|
});
|
|
|
|
const loadDataTable = async (res) => {
|
|
return await getTableList({ ...params, ...res });
|
|
};
|
|
|
|
function reloadTable() {
|
|
actionRef.value.reload();
|
|
}
|
|
|
|
function handleDelete(record) {
|
|
console.log(record);
|
|
Modal.confirm({
|
|
title: '提示',
|
|
content: `您想删除${record.name}`,
|
|
okText: '确认',
|
|
cancelText: '取消',
|
|
onOk() {
|
|
message.success('删除成功');
|
|
},
|
|
onCancel() {},
|
|
});
|
|
}
|
|
|
|
function handleEdit(record) {
|
|
console.log(record);
|
|
message.success('您点击了编辑按钮');
|
|
}
|
|
</script>
|
|
|
|
<style lang="less" scoped></style>
|