vboot-vben框架实现vxe-table筛选渲染filter-render（高级用法）

vboot-vben框架实现vxe-table筛选渲染（高级用法）

以【文本筛选】为例，其他筛选同理’

一、业务页面index.vue

<template>
    <vxe-table
          border
          height="400"
          :data="tableData">
          <vxe-column type="seq" width="60"></vxe-column>
          <vxe-column field="name" title="文本筛选" :filters="[{data: null}]" :filter-render="{name: 'FilterInput'}"></vxe-column>
          <vxe-column field="role" title="实现条件的筛选" ></vxe-column>
          <vxe-column field="age" title="实现内容的筛选" ></vxe-column>
          <vxe-column field="address" title="实现复杂的筛选" ></vxe-column>
        </vxe-table>
</template>


<script type="ts">
    import { defineComponent, ref } from 'vue'

    export default defineComponent({
        setup  () {
            const tableData = ref([
                { id: 10001, name: 'Test1', role: 'Develop', sex: 'Man', age: '28', address: 'Shenzhen' },
                { id: 10002, name: 'Test2', role: 'Test', sex: 'Women', age: '22', address: 'Guangzhou' },
                { id: 10003, name: 'Test3', role: 'PM', sex: 'Man', age: '32', address: 'Shanghai' },
                { id: 10004, name: 'Test4', role: 'Designer', sex: 'Women', age: '23', address: 'Shenzhen' },
                { id: 10005, name: 'Test5', role: 'Develop', sex: 'Women', age: '30', address: 'Shanghai' },
                { id: 10006, name: 'Test6', role: 'Designer', sex: 'Women', age: '21', address: 'Shenzhen' },
                { id: 10007, name: 'Test7', role: 'Test', sex: 'Man', age: '29', address: 'Shenzhen' },
                { id: 10008, name: 'Test8', role: 'Develop', sex: 'Man', age: '35', address: 'Shenzhen' }
            ])

            return {
                tableData
            }
        }
    })
</script>

二、文本筛选模板文件：FilterInput.vue，全路径为：comps/vxe/Filters/FilterInput.vue，（其他模板文件也放在此路径）代码如下：

<template>
    <div class="my-filter-input">
        <vxe-input type="text" v-model="demo1.option.data" 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) {
            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>

三、全局配置 comps/vxe/index.tsx  （***注意原文件扩展名为ts要改为tsx***）

此文件实际是main.ts中 setupVxe(app)调用的关于vxe的全局配置文件，加入如下代码：

import FilterInput from '/@/comps/vxe/Filters/FilterInput.vue';





// 创建一个简单的输入框筛选
VXETable.renderer.add('FilterInput', {
    // 筛选模板
    renderFilter (renderOpts, params) {
        return [<FilterInput params={ params }></FilterInput>]
    },
    // 重置数据方法
    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.property]
        if (cellValue) {
            return cellValue.indexOf(data) > -1
        }
        return false
    }
})

其他筛选方法同理，

四、main.js中VXETable.setup中的配置参数改为false，所有列是否使用服务端筛选，如果设置为 true 则不会对数据进行处理

filterConfig: {
        remote: false,//所有列是否使用服务端筛选，如果设置为 true 则不会对数据进行处理
        // filterMethod: null
},

好了，这样就可以用了