antdv-＜a-table＞的使用

**<a-table>**是 Ant Design Vue 库中用于展示数据表格的组件。它提供了丰富的功能，如分页、排序、筛选等，能够灵活地处理和展示数据。

一、常用属性

1. columns (Array)

用于定义表格的列。每一列是一个对象，包含列的标题、数据索引、宽度等属性.

javascript 复制代码

// 定义表格的列配置
const columns = [
  {
    // 列的标题，显示在表头中
    title: 'id',  
    // 指定数据源中对应的字段名，用于从数据源中提取该列的值
    dataIndex: 'id',  
    // 每一列的唯一标识符，通常与 dataIndex 相同。
    // 这个属性在内部使用，帮助 Vue 跟踪每一行的变化。
    key: 'id',
  },

];

①fixed (Boolean | String)

作用：用于固定列的位置。可以设置为 true（固定到左侧）或 'right'（固定到右侧）。

javascript 复制代码

{ title: '操作', dataIndex: 'method', fixed: 'right' }

②ellipsis (Boolean)

作用：如果设置为 true，则在列内容过长时会显示省略号（...），而不是溢出。

javascript 复制代码

{ title: '描述', dataIndex: 'description', ellipsis: true }

③sorter (Boolean | Function)

作用：用于指定该列是否可排序。如果是布尔值 true，则表示该列可排序；如果是函数，则可以自定义排序逻辑。

javascript 复制代码

{
  title: '年龄',
  dataIndex: 'age',
  sorter: (a, b) => a.age - b.age,
}

④ filters (Arrays)

作用：用于定义可供用户筛选的选项。每个选项是一个对象，包含**text 和 value 属性**。

javascript 复制代码

{
  title: '状态',
  dataIndex: 'status',
  filters: [
    { text: '已完成', value: 'completed' },
    { text: '进行中', value: 'in-progress' },
  ],
  onFilter: (value, record) => record.status.indexOf(value) === 0,
}

⑤align (String)

作用：指定列内容的对齐方式。可选值包括 'left'、'right' 和 'center'。

javascript 复制代码

{ title: '年龄', dataIndex: 'age', align: 'center' }

2. data-source (Array)

表格的数据源，通常是一个数组，包含需要展示的数据对象。

3. pagination (Object | Boolean)

用于控制分页的配置。可以是一个对象，定义分页的各项属性，如当前页、每页条数等；也可以是布尔值，表示是否启用分页。

4. @change (Event)

表格数据变化时触发的事件，通常用于处理分页、排序或筛选的变化。

javascript 复制代码

<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>

javascript 复制代码

<a-table 
   @change="onTableChange" 

  :pagination="pagination" 

  :columns="columns" 

  :data-source="dataSource">

@change : 这是一个事件监听器，当表格的分页、排序或筛选发生变化时会触发该事件 。这里绑定了**onTableChange** 方法来处理这些变化。
:pagination : 绑定了一个响应式对象 pagination，用于控制表格的分页功能，包括当前页、每页条数和总条数。
:columns : 绑定了定义好的列配置 columns，用于描述表格的各个列，包括列标题、数据索引等。
:data-source : 绑定了表格的数据源 dataSource，这是一个数组，包含需要展示的记录。

2. 自定义表头和表体

javascript 复制代码

<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. 表格数据和操作逻辑

①数据源和分页

javascript 复制代码

const dataSource = ref([]);
const pagination = ref({
    pageSizeOptions: ['10', '20', '30'],
    showSizeChanger: true,
    current: 1,
    pageSize: 10,
    total: 0,
});

dataSource: 用于存储表格的数据，初始为空数组，后续会通过 API 请求填充。
pagination: 存储当前分页状态，包括每页显示的条数、当前页、总条数等。

②数据请求和更新

javascript 复制代码

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 调用函数，向后端请求用户列表数据，返回的结果会用于更新表格数据。

③分页变化处理

javascript 复制代码

const onTableChange = (value) => {
    const { current, pageSize } = value;
    pagination.value.current = current;
    pagination.value.pageSize = pageSize;
    getData();
};

onTableChange: 当用户改变分页或排序时会触发这个方法。它会更新当前页和每页条数，并重新请求数据。

④编辑和删除操作

javascript 复制代码

const deleteRecord = async (record) => {
    await deleteStudent(record.id);
    getData();
    message.success('删除成功!');
};

deleteRecord: 这是一个异步函数，接收要删除的记录，调用删除 API，并在成功后刷新数据和提示用户。

编辑操作

javascript 复制代码

const handleEdit = (value) => {
    addObj.value = { ...value };
    isOpen.value = true;
};

handleEdit : 这个函数在点击编辑按钮时被调用，它会将选中的记录数据填充到 addObj 中，并打开编辑模态框。

新增和编辑的表单处理

javascript 复制代码

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，并在成功后刷新数据和重置表单。

⑤搜索功能

javascript 复制代码

const onSearch = () => {
    pagination.value.current = 1;
    getData();
};

onSearch: 这是一个搜索函数，重置当前页为 1，并重新请求数据，通常用于根据搜索条件筛选数据。

⑥模态框处理

javascript 复制代码

const cancel = () => {
    isOpen.value = false;
    addObj.value = {};
    formRef.value.resetFields();
};

cancel: 这个函数用于关闭模态框并重置表单数据。