filter-render自定義filter組建問題

[dishcheng]

可复现的链接：

https://github.com/dishcheng/project_test

问题描述与截图：

Filter組件

<template>
  <div class="my-filter-input">
    {{demo1}}
    <vxe-input type="text" v-model="demo1" placeholder="支持回车筛选" @keyup="keyupEvent" @input="changeOptionEvent"></vxe-input>
  </div>
</template>

<script lang="ts">
import { defineComponent, PropType, reactive } from 'vue'
import { VxeInputEvents, VxeGlobalRendererHandles } from 'vxe-table'

export default defineComponent({
  name: 'FilterInput',
  props: {
    params: Object as PropType<VxeGlobalRendererHandles.RenderFilterParams>
  },
  setup (props) {
    console.log(props)
    const demo1 = reactive({
      option: null as any
    })

    const load = () => {
      const { params } = props
      if (params) {
        const { column } = params
        const option = column.filters[0]
        demo1.option = option
      }
    }

    const changeOptionEvent = () => {
      const { params } = props
      const { option } = demo1
      if (params && option) {
        const { $panel } = params
        const checked = !!option.data
        $panel.changeOption(null, checked, option)
      }
    }

    const keyupEvent: VxeInputEvents.Keyup = ({ $event }) => {
      const { params } = props
      if (params) {
        const { $panel } = params
        if ($event.keyCode === 13) {
          $panel.confirmFilter($event)
        }
      }
    }

    load()

    return {
      demo1,
      changeOptionEvent,
      keyupEvent
    }
  }
})
</script>

<style scoped>
.my-filter-input {
  padding: 10px;
}
</style>

定義ForecastFilterInput render

import {VXETable} from 'vxe-table'
// @ts-ignore
import FilterInput from './components/FilterInput.vue'
import {h} from 'vue'

// 创建一个简单的输入框筛选
VXETable.renderer.add('ForecastFilterInput', {
  // 筛选模板
  renderFilter(renderOpts, renderParams) {
    //####Test1
    // Warning: React.jsx: type is invalid -- expected a string (for built-in components)
    // or a class/function (for composite components)
    // but got: object.
    // return <FilterInput params={renderParams}></FilterInput>

    //####Test2
    //Uncaught (in promise) DOMException: Failed to execute 'setAttribute' on 'Element': '$table'
    // is not a valid attribute name.
    return h('FilterInput', renderParams, [])
  },
  // 重置数据方法
  filterResetMethod(params) {
    const {options} = params
    options.forEach((option) => {
      option.data = ''
    })
  },
  // 重置筛选复原方法（当未点击确认时，该选项将被恢复为默认值）
  filterRecoverMethod({option}) {
    option.data = ''
  },
  // 筛选方法
  filterMethod(params) {
    const {option, row, column} = params
    const {data} = option
    const cellValue = row[column.field]
    if (cellValue) {
      return cellValue.indexOf(data) > -1
    }
    return false
  }
})

src/boot/install.js

import 'src/components/VxeFilterRender/vxeFilterABC'
...

使用

      <vxe-column field="name" title="Name" :filters="[{data: ''}]"
                  :filter-render="{name: 'ForecastFilterInput'}"
      ></vxe-column>

dependencies

  "dependencies": {
    "@quasar/extras": "^1.0.0",
    "@vue/babel-helper-vue-jsx-merge-props": "^1.4.0",
    "@vue/babel-preset-jsx": "^1.4.0",
    "axios": "^0.21.1",
    "core-js": "^3.6.5",
    "cross-env": "^7.0.2",
    "dotenv": "^16.0.1",
    "echarts": "^5.3.2",
    "element-plus": "2.1.11",
    "json2csv": "^5.0.6",
    "mitt": "^3.0.0",
    "quasar": "^2.6.0",
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "vue": "^3.0.0",
    "vue-i18n": "^9.0.0",
    "vue-lazyload": "^3.0.0-rc.2",
    "vue-router": "^4.0.0",
    "vue-scrollto": "^2.20.0",
    "vue3-sortable-js": "^1.0.0",
    "vuex": "^4.0.1",
    "vxe-table": "^4.3.6",
    "xe-utils": "3.5.7"
  },
  "devDependencies": {
    "@babel/plugin-syntax-jsx": "^7.18.6",
    "@babel/preset-react": "^7.18.6",
    "@quasar/app-webpack": "^3.0.0",
    "@quasar/quasar-app-extension-qenv": "^1.1.0",
    "@types/node": "^12.20.21",
    "eslint": "^8.17.0",
    "eslint-config-prettier": "^8.1.0",
    "eslint-plugin-vue": "^9.1.0",
    "prettier": "^2.5.1",
    "ts-loader": "^9.3.0",
    "tslint": "^6.1.3",
    "tslint-loader": "^3.5.4",
    "typescript": "^4.7.3",
    "vue-eslint-parser": "^9.0.2"
  },

試了兩種方法

但是都不行

期望的结果：

No response

操作系统：

macos

浏览器版本：

chrome

vue 版本：

3.2.36

vxe-table 版本：

4.3.6

[dishcheng]

    return h(FilterExtend, {params: renderParams})