antdv-＜a-table＞的使用
<a-table> 是 Ant Design Vue 库中用于展示数据表格的组件。它提供了丰富的功能，如分页、排序、筛选等，能够灵活地处理和展示数据。
一、常用属性
1. columns (Array)
- 用于定义表格的列。每一列是一个对象，包含列的标题、数据索引、宽度等属性.
// 定义表格的列配置
const columns = [
{
// 列的标题，显示在表头中
title: 'id',
// 指定数据源中对应的字段名，用于从数据源中提取该列的值
dataIndex: 'id',
// 每一列的唯一标识符，通常与 dataIndex 相同。
// 这个属性在内部使用，帮助 Vue 跟踪每一行的变化。
key: 'id',
},
];①fixed (Boolean | String)
- 作用：用于固定列的位置。可以设置为
true（固定到左侧）或'right'（固定到右侧）。 -
{ title: '操作', dataIndex: 'method', fixed: 'right' }
②ellipsis (Boolean)
- 作用：如果设置为
true，则在列内容过长时会显示省略号（...），而不是溢出。 -
{ title: '描述', dataIndex: 'description', ellipsis: true }
③sorter (Boolean | Function)
- 作用：用于指定该列是否可排序。如果是布尔值
true，则表示该列可排序；如果是函数，则可以自定义排序逻辑。 -
{ title: '年龄', dataIndex: 'age', sorter: (a, b) => a.age - b.age, }
④ filters (Arrays)
- 作用：用于定义可供用户筛选的选项。每个选项是一个对象，包含
text和value属性。 -
{ title: '状态', dataIndex: 'status', filters: [ { text: '已完成', value: 'completed' }, { text: '进行中', value: 'in-progress' }, ], onFilter: (value, record) => record.status.indexOf(value) === 0, }
⑤align (String)
- 作用：指定列内容的对齐方式。可选值包括
'left'、'right'和'center'。 -
{ title: '年龄', dataIndex: 'age', align: 'center' }
2. data-source (Array)
- 表格的数据源，通常是一个数组，包含需要展示的数据对象。
3. pagination (Object | Boolean)
- 用于控制分页的配置。可以是一个对象，定义分页的各项属性，如当前页、每页条数等；也可以是布尔值，表示是否启用分页。
4. @change (Event)
- 表格数据变化时触发的事件，通常用于处理分页、排序或筛选的变化。
-
<a-table @change="onTableChange" :pagination="pagination" :columns="columns" :data-source="dataSource" > // 分页数据 const pagination = ref({ pageSizeOptions: ['10', '20', '30'], showSizeChanger: true, // 显示选择框 总条数大于50默认为true // 当前页 current: 1, // 每页数 pageSize: 10, // 总条数 total: 0, }); // 页码点击切换 监听改变事件 const onTableChange = (value) => { console.log(value); // 对象解构 const { current, pageSize } = value; pagination.value.current = current; pagination.value.pageSize = pageSize; // 先变化 再请求 getData(); }
二、示例代码
1.表格组件 <a-table>
<a-table
@change="onTableChange"
:pagination="pagination"
:columns="columns"
:data-source="dataSource">
-
@change: 这是一个事件监听器，当表格的分页、排序或筛选发生变化时会触发该事件。这里绑定了onTableChange方法来处理这些变化。 -
:pagination: 绑定了一个响应式对象pagination，用于控制表格的分页功能，包括当前页、每页条数和总条数。 -
:columns: 绑定了定义好的列配置columns，用于描述表格的各个列，包括列标题、数据索引等。 -
:data-source: 绑定了表格的数据源dataSource，这是一个数组，包含需要展示的记录。
2. 自定义表头和表体
<template #headerCell></template>
<template #bodyCell="{ column, record }">
<template v-if="column.dataIndex === 'method'">
<a-space>
<a-button type="primary" @click="()=>handleEdit(record)">编辑</a-button>
<a-popconfirm
title="确认删除?"
ok-text="确认"
cancel-text="取消"
@confirm="()=>deleteRecord(record)">
<a-button>删除</a-button>
</a-popconfirm>
</a-space>
</template>
</template>
-
#headerCell: 这是一个插槽，留空表示不自定义表头。可以根据需要自定义表头内容。 -
#bodyCell: 这个插槽用于自定义表格的单元格内容。通过解构{ column, record }获取当前列和当前行的数据。 -
v-if="column.dataIndex === 'method'": 检查当前列是否为操作列（method），如果是，则渲染操作按钮。 -
<a-space>: 用于在按钮之间添加间距。 -
<a-button>: 编辑和删除按钮，分别绑定了handleEdit和deleteRecord方法。 -
<a-popconfirm>: 用于确认删除操作的弹出框，用户在点击删除按钮后会弹出确认框。
3. 表格数据和操作逻辑
①数据源和分页
const dataSource = ref([]);
const pagination = ref({
pageSizeOptions: ['10', '20', '30'],
showSizeChanger: true,
current: 1,
pageSize: 10,
total: 0,
});
-
dataSource: 用于存储表格的数据，初始为空数组，后续会通过 API 请求填充。 -
pagination: 存储当前分页状态，包括每页显示的条数、当前页、总条数等。
②数据请求和更新
const getData = async () => {
const res = await getUserList({
pageNumber: pagination.value.current,
pageSize: pagination.value.pageSize,
borrower: searchObj.value.borrower,
...searchObj.value,
});
dataSource.value = res.data.data.record;
pagination.value.current = res.data.data.pageNumber;
pagination.value.total = res.data.data.totalItems;
pagination.value.pageSize = res.data.data.pageSize;
};
-
getData: 这是一个异步函数，用于请求数据。它会根据当前页码和每页条数来请求数据，并更新dataSource和pagination。 -
getUserList: 这是一个 API 调用函数，向后端请求用户列表数据，返回的结果会用于更新表格数据。
③分页变化处理
const onTableChange = (value) => {
const { current, pageSize } = value;
pagination.value.current = current;
pagination.value.pageSize = pageSize;
getData();
};
onTableChange: 当用户改变分页或排序时会触发这个方法。它会更新当前页和每页条数，并重新请求数据。
④编辑和删除操作
const deleteRecord = async (record) => {
await deleteStudent(record.id);
getData();
message.success('删除成功!');
};
deleteRecord: 这是一个异步函数，接收要删除的记录，调用删除 API，并在成功后刷新数据和提示用户。
编辑操作
const handleEdit = (value) => {
addObj.value = { ...value };
isOpen.value = true;
};
handleEdit: 这个函数在点击编辑按钮时被调用，它会将选中的记录数据填充到addObj中，并打开编辑模态框。
新增和编辑的表单处理
const handleAdd2 = async () => {
await formRef.value.validateFields();
const isEdit = !!addObj.value.id;
if (isEdit) {
await updateLoan(addObj.value);
message.success('编辑成功');
} else {
await createLoan(addObj.value);
message.success('添加成功');
}
getData();
formRef.value.resetFields();
};
handleAdd2: 这个函数用于处理新增或编辑的提交。首先验证表单数据，然后根据addObj中是否有id判断是编辑还是新增，调用相应的 API，并在成功后刷新数据和重置表单。
⑤搜索功能
const onSearch = () => {
pagination.value.current = 1;
getData();
};
onSearch: 这是一个搜索函数，重置当前页为 1，并重新请求数据，通常用于根据搜索条件筛选数据。
⑥模态框处理
const cancel = () => {
isOpen.value = false;
addObj.value = {};
formRef.value.resetFields();
};
cancel: 这个函数用于关闭模态框并重置表单数据。