ant design vue 表格

### Ant Design Vue 表格组件使用方法 #### 自定义行行为 `customRow` 通过`<Table>`标签中的`customRow`属性可以自定义表格每一行的行为，包括设置行的属性和监听行上的事件。下面是一个简单的例子来展示如何利用此功能： ```vue <template> <a-table :columns="columns" :data-source="data" :custom-row="rowEvents"> </a-table> </template> <script> export default { data() { return { columns: [ // 定义列的信息... ], data: [], // 数据源数组, }; }, methods: { rowEvents(record) { return { props: {}, on: { click: event => console.log('Click', record, event), dblclick: event => console.log('Double Click', record, event), contextmenu: event => console.log('Right Click', record, event), mouseenter: event => console.log('Mouse Enter', record, event), // 鼠标移入行 mouseleave: event => console.log('Mouse Leave', record, event) } }; } } }; </script> ``` 上述代码展示了怎样给每行添加点击、双击、右键菜单以及鼠标悬停进出等交互逻辑[^1]。 #### 带有搜索条件的分页查询 对于带有分页器(Pagination)并支持按条件筛选数据的情况，在执行分页操作时保持原有的过滤参数非常重要。这可以通过在发送请求获取新一页的数据之前收集当前所有的筛选项，并将其作为参数传递给服务器端API完成。这里给出一个简化版的例子说明这一过程: ```javascript // 假设这是你的Vue实例的一部分配置 methods: { handleTableChange(pagination, filters, sorter) { const pager = { ...this.pagination }; pager.current = pagination.current; this.pagination = pager; // 将分页信息和其他筛选条件一起传送给服务端 this.fetch({ results: pagination.pageSize, page: pagination.current, sortField: sorter.field, sortOrder: sorter.order, ...filters, ...this.searchConditions // 这里假设searchConditions存储着所有来自表单控件的输入值 }); }, fetch(params = {}) { // 发起网络请求获得新的页面数据 // params包含了分页信息、排序字段/顺序以及其他任何用于过滤显示记录的关键字或选项. // ... } } ``` 在这个场景下，每当用户改变分页位置或是调整了某些筛选标准之后都会触发`handleTableChange()`函数；该函数负责更新内部状态并且重新加载对应的新一批次的数据集[^2]。