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
    }
})

其他篩選方法同理，好了，這樣就可以用了