antdesign vue table使用

在Ant Design Vue中，可以使用Table组件来展示表格数据。以下是一个使用示例：

<a-table 
  ref="TableInfo" 
  :columns="columns" 
  :dataSource="dataSource" 
  :pagination="pagination" 
  :loading="loading" 
  :rowSelection="{selectedRowKeys: selectedRowKeys, onChange: onSelectChange}" 
  :scroll="{ x: 900 }" 
  rowKey="userId" 
  @change="handleTableChange">
  <template slot="operation" slot-scope="text, record">
    <a-icon type="eye" theme="twoTone" twoToneColor="#42b983" @click="view(record)" title="查看"></a-icon>
    &nbsp;
    <a-icon type="setting" theme="twoTone" twoToneColor="#4a9ff5" @click="edit(record)" title="修改用户"></a-icon>
    &nbsp;
  </template>
</a-table>

在Table组件中，可以使用以下属性来实现筛选和排序功能：

- `pagination`：设置分页属性，如`pageSizeOptions`（每页显示条数的选项）、`defaultCurrent`（默认当前页）、`defaultPageSize`（默认每页显示条数）、`showQuickJumper`（是否显示快速跳转页）、`showSizeChanger`（是否显示改变每页显示条数）、`current`（当前页数）、`pageSize`（每页显示的条数）、`total`（总条数）。
- `columns`：设置表格的列配置，可以使用`dataIndex`来指定数据项，也可以通过`customRender`函数来对特定的列进行自定义渲染，如加入一列序号。
- `rowSelection`：设置行选择功能，可以通过指定`selectedRowKeys`和`onChange`来实现复选框的选择与变化。

另外，如果需要在表格前添加复选框，并且要保证其唯一性，可以在`a-table`标签上添加`rowKey="id"`属性，其中`id`是数据源中的唯一标识项。

希望以上内容对您有帮助！
#### 引用[.reference_title]
- *1* *2* [基于ant-design-vue table 组件的使用](https://blog.csdn.net/qq_36437172/article/details/92653441)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 50%"]
- *3* [antdesign vue——table](https://blog.csdn.net/weixin_43848576/article/details/121350568)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 50%"]
[ .reference_list ]