vxe-table增加查询

要在vxe-table中增加查询功能，可以使用vxe-table提供的filter要在vxe-table中增加查询功能，你可以使用vxe-table提供的filter-config属性。该属性可以配置表格的筛选条件，包括筛选类型、筛选条件、筛选规则等。具体步骤如下：
1. 在表格组件中添加filter-config属性，该属性值为一个对象，包含筛选条件的配置信息。
2. 在表格列中添加filter-render属性，该属性值为一个函数，用于自定义筛选条件的渲染方式。
3. 在表格列中添加filters属性，该属性值为一个数组，包含筛选条件的选项。

举个例子，如果你想在vxe-table中增加一个按照姓名进行筛选的功能，可以按照以下步骤进行配置：
1. 在表格组件中添加filter-config属性，该属性值为一个对象，包含筛选条件的配置信息。例如：

<template>
  <vxe-table
    :data="tableData"
    :columns="columns"
    :filter-config="filterConfig"
  ></vxe-table>
</template>

<script>
export default {
  data() {
    return {
      tableData: [...],
      columns: [...],
      filterConfig: {
        filterMethod: 'remote',
        remote: {
          url: '/api/filter',
          params: {
            name: ''
          }
        }
      }
    }
  }
}
</script>

在上述代码中，我们通过filter-config属性配置了筛选条件的方法为remote，即使用远程接口进行筛选。我们还配置了远程接口的url和params，其中params中的name属性用于存储筛选条件的值。

2. 在表格列中添加filter-render属性，该属性值为一个函数，用于自定义筛选条件的渲染方式。例如：

<template>
  <vxe-table
    :data="tableData"
    :columns="columns"
    :filter-config="filterConfig"
  ></vxe-table>
</template>

<script>
export default {
  data()要在vxe-table中增加查询功能，可以使用vxe-table提供的filter-config属性。首先需要在表格中添加一个input框，用于输入查询条件，然后在filter-config属性中配置查询条件，最后在表格中使用filter方法进行查询。具体步骤如下：
1. 在表格上方添加一个input框，用于输入查询条件。
2. 在data中定义一个query变量，用于保存查询条件。
3. 在filter-config属性中配置查询条件，可以设置多个查询条件，每个查询条件包括字段名、查询类型、查询条件等。
4. 在表格中使用filter方法进行查询，将query变量作为参数传入即可。

代码示例：

<template>
<div>
<input v-model="query" placeholder="请输入查询条件">
<vxe-table :data="tableData" :columns="columns" :filter-config="filterConfig"></vxe-table>
</div>
</template>

<script>
export default {
data() {
return {
query: '',
tableData: [
{ id: 1, name: '张三', age: 20 },
{ id: 2, name: '李四', age: 25 },
{ id: 3, name: '王五', age: 30 }
],
columns: [
{ field: 'id', title: 'ID', align: 'center' },
{ field: 'name', title: '姓名', align: 'center' },
{ field: 'age', title: '年龄', align: 'center' }
],
filterConfig: {
filterMethod({ row, column, cellValue }) {
const { query } = this
if (!query) {
return true
}
const regExp = new RegExp(query, 'i')
return regExp.test(cellValue)
}
}
}
},
methods: {
handleFilter() {
this.$refs.table.filter(this.query)
}
}
}
</script>