vue2实现vxe-grid筛选渲染filter-render(高级用法)

筛选渲染 filter-render

配置参数：

• className 自定义容器的 className
• showFilterFooter 是否显示底部按钮
• renderFilter (h, renderOpts, params) 内容
• filterMethod (params) 筛选数据函数
• filterResetMethod (params) 筛选重置函数

• $panel 对象:

  changeOption(event: Event | null, checked: boolean, option: ColumnFilterParams) 更新选项的状态
  confirmFilter(event?: Event) 确认筛选
  resetFilter(event?: Event) 清除筛选条件

// 创建一个简单的输入框筛选

VXETable.renderer.add('FilterInput', {
  showFilterFooter:false,
  // 筛选模板
  renderFilter (h, renderOpts, params) {
    let {$spanel,column} = params
    const { events } = renderOpts
    let obj = columns.filters[0]
    const checked = !!obj.data
    $panel.changeOption(null,checked,obj)
    return [
      <a-input v-model={obj.data}></a-input>,
      <a-button onClick={()=>events.click($panel,obj,column)}>查询</a-button>
    ]
  },
  // 重置数据方法
  filterResetMethod ({ options }) {
    options.forEach((option) => {
      option.data = ''
    })
  },
  // 重置筛选复原方法（当未点击确认时，该选项将被恢复为默认值）
  filterRecoverMethod ({ option }) {
    option.data = ''
  },
  // 筛选方法
  filterMethod ({ option, row, column }) {
    const { data } = option
    const cellValue = row[column.property]
    if (cellValue) {
      return cellValue.indexOf(data) > -1
    }
    return false
  }
})

      <vxe-grid
         border
         resizable
         height="300"
         :columns="tableColumn"
         :data="tableData">
       </vxe-grid>

export default {
          data () {
            return {
              tableColumn: [
                { type: 'seq', width: 50 },
                { 
                    field: 'name',
                    title: '姓名',
                    filters:[{data:''}],
                    filterRendr:{
                        name:'filterInput',
                        events:{
                            click:($panel,dataObj,column)=>{
                                this.getInfo($panel,dataObj,column)
                            }
                        }
                    }
                },
                { field: 'sex', title: '性别', showHeaderOverflow: true },
              ],
              tableData: [
                { id: 10001, name: 'Test1', nickname: 'T1', role: 'Develop', sex: 'Man', age: 28, address: 'Shenzhen' },
                { id: 10002, name: 'Test2', nickname: 'T2', role: 'Test', sex: 'Women', age: 22, address: 'Guangzhou' }
              ]
            }
          },
          methods:{
            getInfo($panel,dataObj,column){
                $panel.confirmFilter()
                //下一步操作
                //dataObj.data:查询输入框参数
                //column.property:表格列
            }
        }