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