filter-render用法

`filter-render` 是 `vxe-table` 中的一个高级特性，它可以让我们自定义列的筛选菜单。通常情况下，我们使用 `filters` 属性来为表格列设置筛选项，这些筛选项会在表头的下拉菜单中显示。但是，如果我们需要更加复杂的筛选菜单，比如需要使用自定义组件或者根据行数据动态设置筛选项，那么就需要使用 `filter-render` 来实现。

使用 `filter-render` 时，我们需要在列配置中设置 `filter-render` 属性。这个属性是一个函数，它接收两个参数：`h` 和 `params`。其中，`h` 是一个渲染函数，我们可以使用它来创建自定义的筛选菜单；`params` 是一个对象，它包含了当前列的信息以及一些实用的方法，比如 `handleConfirm` 用于提交筛选条件，`handleReset` 用于重置筛选条件等。

下面是一个简单的例子，演示了如何使用 `filter-render` 来创建一个带有搜索框的筛选菜单：

{
  title: '名称',
  key: 'name',
  filters: [],
  filterRender: (h, { column }) => {
    return h('div', [
      h('el-input', {
        props: {
          size: 'small',
          placeholder: '请输入名称'
        },
        on: {
          input: (event) => {
            column.filteredValue = event.target.value ? [event.target.value] : []
          }
        }
      }, [])
    ])
  }
}

在上述代码中，我们首先创建了一个 `div` 元素，然后在其中嵌套了一个 `el-input` 组件。在 `el-input` 组件的 `input` 事件中，我们根据用户输入的值动态设置了 `filteredValue` 属性。这样，当用户点击确认按钮时，`vxe-table` 就会自动使用这个筛选条件。

除了使用 `h` 函数来手动创建组件之外，我们还可以使用已有的组件来实现筛选菜单。比如，我们可以使用 `el-checkbox-group` 来创建一个多选筛选菜单：

{
  title: '状态',
  key: 'status',
  filters: [
    { text: '进行中', value: 'processing' },
    { text: '已完成', value: 'completed' }
  ],
  filterRender: (h, { column }) => {
    return h('el-checkbox-group', {
      props: {
        size: 'mini'
      },
      on: {
        change: (value) => {
          column.filteredValue = value
        }
      }
    }, column.filters.map(({ text, value }) => (
      <el-checkbox label={value}>{text}</el-checkbox>
    )))
  }
}

在上述代码中，我们首先创建了一个 `el-checkbox-group` 组件，并将列的筛选项作为它的子组件渲染出来。在 `change` 事件中，我们根据用户选择的值动态设置了 `filteredValue` 属性。

总之，使用 `filter-render` 可以让我们更加灵活地定制筛选菜单，实现更加复杂的筛选需求。