vxe-table proxyConfig根据条件筛选数据

vxe-table 的 `proxy-config` 可以用来实现根据条件筛选数据。具体步骤如下：

1. 在 `proxy-config` 中定义一个 `ajax` 请求来获取数据。

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` 方法中添加筛选条件，并将条件传到后端。

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. 在表格中添加筛选条件。

<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. 实现筛选功能。

methods: {
  filterData() {
    // 触发筛选操作
    this.$refs.table.filter()
  }
}

这样，当用户输入筛选条件时，表格会根据条件发送请求获取数据，并渲染符合条件的数据。