## **1、快速使用**
### 主要向大家介绍Vue-Ant Design Pro of Vue 数据表格组件ele-pro-table的使用,希望对大家有所帮助。用于简化查询、分页、排序、筛选等操作，v1.1.0 新增，使用方式：
```
<template>
<ele-pro-table
ref="tableRef"
row-key="userId"
:datasource="datasource"
:columns="columns">
</ele-pro-table>
</template>
<script lang="ts" setup>
import { ref } from 'vue';
import { pageUsers } from '@/api/system/user';
// 表格实例
const tableRef = ref<InstanceType<typeof EleProTable>>();
// 表格列配置
const columns = ref<ColumnItem[]>([
{
key: 'index',
width: 48,
align: 'center',
hideInSetting: true,
customRender: ({ index }) => index + (tableRef.value?.tableIndex ?? 0)
},
{
title: '用户账号',
dataIndex: 'username'
},
{
title: '用户名',
dataIndex: 'nickname'
},
{
title: '手机号',
dataIndex: 'phone'
},
{
title: '创建时间',
dataIndex: 'createTime'
}
]);
// 表格数据源
const datasource: DatasourceFunction = ({ page, limit, where, orders }) => {
return pageUsers({ ...where, ...orders, page, limit });
};
</script>
```
### 注意: 表格需要配置**row-key**设定数据的唯一字段, 列配置中**key**也是要必填且唯一, 如果写了**dataIndex**可以不写**key**, 但如果多个列有相同的**dataIndex**, 就应该设置唯一的**key**
