首先引用插件:

npm install xe-utils vxe-table --S
npm install xe-utils vxe-table vxe-table-plugin-element element-ui --S

import 'xe-utils'
import VXETable from 'vxe-table'
import 'vxe-table/lib/style.css'
Vue.use(VXETable)
// 在vxe-table中使用el组件需引用的插件
import VXETablePluginElement from 'vxe-table-plugin-element'
import 'vxe-table-plugin-element/dist/style.css'

VXETable.use(VXETablePluginElement)

接下来是重点关于自定义渲染筛选
写法跟官网文档介绍的一样

<vxe-table
    ref="xTable"
    border
    show-overflow
    highlight-hover-row
    height="100%"
    :sort-config="{trigger: 'cell'}"
    :data="currentTableData"
    @loadData="loadData"
>
		<vxe-table-column
		   align="center"
		   v-for="item in tableTitles"
		   :key="item"
		   :title="item"
		   :field="item"
		   :filter-multiple="false"
		   :filters="[{data: { type1: '', type2: '', value1: '', value2: '', between: ''}}]"
		   :filter-render="{name: 'FilterExcel'}"
		>
		</vxe-table-column>
</vxe-table>

VXETable.renderer.add('FilterExcel', {
    // 不显示底部按钮，使用自定义的按钮
    isFooter: false,
    // 筛选模板
    renderFilter (h, renderOpts, params) {
        return [
        <FilterExcel params={ params }></FilterExcel>
        ]
    },
    // 重置数据方法
    filterResetMethod ({ options }) {
        options.forEach(option => {
        option.data = { type1: '', type2: '', value1: '', value2: '', between: ''}
        })
    },
    // 筛选数据方法
    filterMethod ({ option, row, column }) {
            console.log('列表数据为', )
        } else {
            console.log("你没有设置筛选")
        }
        
    }
})

注册了一个name为 FilterExcel高级渲染器
可以说至此于官方文档介绍的用法差不多。

而且表格的数据也是渲染成功的 那么应该如何去获取到渲染(筛选)之后的数据呢？以此来保存筛选过后的表格数据呢?因为这个渲染器方法并没有绑定在vue单页面里（需求是将筛选后的数据取出来
这个vxe-table的$refs里有一个属性可以获取到渲染后的数据
我们可以随便码一个按钮绑定事件去打印看一下

console.log(this.$refs.xTable) 

第一次打印全部的表格数据

第一次打印id值大于600的表格数据

ok用法就是这样啦，查看当前页面渲染的表格数据 就是这个afterFullData
如果小伙伴们有更好的方法去获取筛选后的数据请评论一下 分享哈~