vxe-table中filter-render的详细用法

在VxeTable这个Vue表格组件库中，`filter-render`是一个非常有用的特性，用于自定义过滤框的渲染内容和行为。它允许开发者完全控制每个列的过滤输入框的显示样式、交互以及返回值处理。

以下是`filter-render`的基本用法：

1. 定义在列配置对象里：

<template>
  <vxe-table
    :columns="columns"
    //...
  ></vxe-table>
</template>

<script>
export default {
  data() {
    return {
      columns: [
        {
          field: 'name',
          title: '姓名',
          filterRender: (h, { column, props }) => {
            // h 是 Vue 的 template 渲染函数，props 包含当前行数据和列配置
            return h('input', { onInput: e => props.filter(e.target.value) })
          },
        },
        //...
      ]
    };
  }
}
</script>

在这个例子中，当用户在表头的“姓名”列上输入时，会看到一个自定义的输入框，并且输入的内容会被直接作为过滤条件应用到数据上。

2. `filterRender`接收两个参数：
- `h`：Vue的挂载实例，可以用来创建DOM元素。
- `{ column, props }`：列信息对象和当前行的数据，你可以通过它们获取更多的上下文信息。