vxe-grid 表单查询

vxe-grid 是 Vue 组件库 Vuetify 组件 Explorer（Vue 开发者工具箱）中的一款强大的表格组件，它支持高度定制化和交互功能，包括表单查询功能。在 vxe-grid 中实现表单查询通常涉及以下几个步骤：

1. **配置列**: 在列定义中添加 `search` 或 `filter` 属性，这会启用列的搜索框，用户可以在其中输入关键词进行过滤。

<template>
  <vxe-grid :columns="columns" :data="tableData" @search="handleSearch">
    <!-- ... -->
  </vxe-grid>
</template>

<script>
export default {
  data() {
    return {
      columns: [
        { field: 'name', title: '姓名', filterable: true },
        { field: 'age', title: '年龄', search: true },
        // ...
      ],
      tableData: [], // 你的数据源
    };
  },
  methods: {
    handleSearch(query) {
      this.tableData = this.tableData.filter(item => item.name.includes(query) || item.age.toString().includes(query));
    }
  },
};
</script>

在这个例子中，`handleSearch` 方法会在用户输入时筛选数据源 `tableData`。

2. **事件监听**: 使用 `@search` 触发事件，传递搜索内容到处理函数中，对数据进行实时过滤。

3. **动态查询**: 如果需要更复杂的查询逻辑，可以使用自定义的过滤器函数或管道 (pipe) 来处理搜索条件。