vxe-table表格里,我对表格进行筛选后,我获取行数据并不是当前筛选的数据,而是筛选前的行数据,这是什么问题
时间: 2023-03-04 18:35:55 浏览: 92
这个问题可能是因为你使用的是vxe-table的默认API获取行数据,这些API获取的是vxe-table中的数据源,而不是筛选后的数据。
如果你想获取筛选后的数据,你需要使用vxe-table的内置筛选API,例如`$table.getCheckboxRecords()`,`$table.getSelectedRecords()`或`$table.getVisibleRecords()`,这些API会返回当前在表格中显示的所有行数据,包括已筛选和已排序的数据。
例如,如果你想获取当前在表格中选中的行数据,你可以使用`$table.getSelectedRecords()`。如果你想获取所有已筛选的行数据,你可以使用`$table.getVisibleRecords()`。请注意,这些API返回的是一个数组,你需要遍历数组来获取每一行的数据。
相关问题
vxe-table proxyConfig根据条件筛选数据
vxe-table 的 `proxy-config` 可以用来实现根据条件筛选数据。具体步骤如下:
1. 在 `proxy-config` 中定义一个 `ajax` 请求来获取数据。
```js
proxyConfig: {
// 定义请求数据的方法
ajax: {
url: 'http://xxx.xxx.xxx.xxx/api/table',
method: 'POST',
headers: {
'Content-Type': 'application/json;charset=UTF-8'
},
transformRequest: (data) => {
return JSON.stringify(data)
}
}
}
```
2. 在 `fetch` 方法中添加筛选条件,并将条件传到后端。
```js
fetch(params) {
// 添加筛选条件
if (params.filters) {
params.filters.forEach((item) => {
if (item.data) {
params[item.column.id] = item.data
}
})
}
// 发送请求
return this.$axios.post('/api/table', params).then((res) => {
return res.data
})
}
```
3. 在表格中添加筛选条件。
```html
<vxe-table
:proxy-config="proxyConfig"
:fetch="fetch"
:columns="columns">
<vxe-table-column
v-for="(column, index) in columns"
:key="index"
:field="column.prop"
:title="column.label">
<template #filter="{column}">
<!-- 添加筛选条件 -->
<vxe-input
v-model="column.data"
type="text"
placeholder="请输入筛选条件"
@input="filterData">
</vxe-input>
</template>
</vxe-table-column>
</vxe-table>
```
4. 实现筛选功能。
```js
methods: {
filterData() {
// 触发筛选操作
this.$refs.table.filter()
}
}
```
这样,当用户输入筛选条件时,表格会根据条件发送请求获取数据,并渲染符合条件的数据。
vxe-table proxyConfig根据条件前端筛选数据
vxe-table 的 `proxy-config` 可以用来实现根据条件前端筛选数据。具体步骤如下:
1. 在 `proxy-config` 中定义一个 `ajax` 请求来获取数据。
```js
proxyConfig: {
// 定义请求数据的方法
ajax: {
url: 'http://xxx.xxx.xxx.xxx/api/table',
method: 'POST',
headers: {
'Content-Type': 'application/json;charset=UTF-8'
},
transformRequest: (data) => {
return JSON.stringify(data)
}
}
}
```
2. 在 `fetch` 方法中添加筛选条件,并从后端获取数据。
```js
fetch(params) {
// 添加筛选条件
let data = this.tableData
if (params.filters) {
params.filters.forEach((item) => {
if (item.data) {
data = data.filter((row) => {
let cell = row[item.column.property]
return cell.indexOf(item.data) > -1
})
}
})
}
// 返回符合条件的数据
return Promise.resolve(data)
}
```
3. 在表格中添加筛选条件。
```html
<vxe-table
:proxy-config="proxyConfig"
:fetch="fetch"
:columns="columns">
<vxe-table-column
v-for="(column, index) in columns"
:key="index"
:field="column.prop"
:title="column.label">
<template #filter="{column}">
<!-- 添加筛选条件 -->
<vxe-input
v-model="column.data"
type="text"
placeholder="请输入筛选条件"
@input="filterData">
</vxe-input>
</template>
</vxe-table-column>
</vxe-table>
```
4. 实现筛选功能。
```js
methods: {
filterData() {
// 触发筛选操作
this.$refs.table.filter()
}
}
```
这样,当用户输入筛选条件时,表格会根据条件前端筛选数据,并渲染符合条件的数据。