123 lines
3.0 KiB
Plaintext
123 lines
3.0 KiB
Plaintext
<template>
|
|
<a-card :bordered="false" class="proCard">
|
|
<BasicTable
|
|
leftTitle="表格列表"
|
|
leftTitleTooltip="这是一个提示"
|
|
:columns="columns"
|
|
:request="loadDataTable"
|
|
:row-key="(row) => row.id"
|
|
ref="tableRef"
|
|
:actionColumn="actionColumn"
|
|
@edit-end="editEnd"
|
|
@edit-change="onEditChange"
|
|
>
|
|
<template #toolbar>
|
|
<a-button type="primary" @click="reloadTable">刷新数据</a-button>
|
|
</template>
|
|
|
|
<template #bodyCell="{ column, record, index }">
|
|
<template v-if="column.key === 'action'">
|
|
<TableAction :actions="createActions(record, index)" />
|
|
</template>
|
|
|
|
<template v-if="column.key === 'avatar'">
|
|
<a-avatar shape="square" :src="record.avatar" :size="48" />
|
|
</template>
|
|
</template>
|
|
</BasicTable>
|
|
</a-card>
|
|
</template>
|
|
|
|
<script lang="ts" setup>
|
|
import { reactive, ref, h } from 'vue';
|
|
import { BasicColumn, BasicTable, TableAction } from '@/components/Table';
|
|
import { getTableList } from '@/api/table/list';
|
|
import { columns } from './rowColumns';
|
|
import { renderIcon } from '@/utils';
|
|
import { FormOutlined } from '@ant-design/icons-vue';
|
|
|
|
const tableRef = ref();
|
|
const currentEditKeyRef = ref('');
|
|
const params = reactive({
|
|
pageSize: 5,
|
|
name: 'xiaoMa',
|
|
});
|
|
|
|
const actionColumn: BasicColumn = reactive({
|
|
width: 160,
|
|
title: '操作',
|
|
key: 'action',
|
|
fixed: 'right',
|
|
align: 'center',
|
|
customRender({ record, index }) {
|
|
return h(TableAction as any, {
|
|
style: 'button',
|
|
actions: createActions(record, index),
|
|
});
|
|
},
|
|
});
|
|
|
|
function handleEdit(record) {
|
|
console.log(record);
|
|
currentEditKeyRef.value = record.key || record.dataIndex;
|
|
record.onEdit?.(true);
|
|
}
|
|
|
|
function handleCancel(record) {
|
|
currentEditKeyRef.value = '';
|
|
record.onEdit?.(false, false);
|
|
}
|
|
|
|
function onEditChange({ column, value, record }) {
|
|
console.log(column, value, record);
|
|
}
|
|
|
|
async function handleSave(record) {
|
|
const pass = await record.onEdit?.(false, true);
|
|
if (pass) {
|
|
currentEditKeyRef.value = '';
|
|
}
|
|
}
|
|
|
|
function createActions(record, index) {
|
|
if (!record.editable) {
|
|
return [
|
|
{
|
|
label: '编辑',
|
|
size: 'small',
|
|
icon: renderIcon(FormOutlined),
|
|
onClick: handleEdit.bind(null, record, index),
|
|
},
|
|
];
|
|
} else {
|
|
return [
|
|
{
|
|
label: '保存',
|
|
size: 'small',
|
|
onClick: handleSave.bind(null, record, index),
|
|
},
|
|
{
|
|
label: '取消',
|
|
size: 'small',
|
|
onClick: handleCancel.bind(null, record, index),
|
|
},
|
|
];
|
|
}
|
|
}
|
|
|
|
const loadDataTable = async (res) => {
|
|
return await getTableList({ ...params, ...res });
|
|
};
|
|
|
|
function reloadTable() {
|
|
console.log(tableRef.value);
|
|
tableRef.value.reload();
|
|
}
|
|
|
|
function editEnd({ value }) {
|
|
console.log(value);
|
|
}
|
|
</script>
|
|
|
|
<style lang="less" scoped></style>
|