vue使用ant Desgin的表格搜索筛选遇到的问题

Question

// 使用ant的表格的时候 有个搜索功能  官网是这样定义的  在data里面有两个 函数 onFilter  和 onFilterDropdownVisibleChange  
// data 里面是函数  但是我现在的表格的表头跟数据都是 动态的数据 都是我遍历回来的  但是遍历的时候 我不能把这个函数给遍历进// 去呀 要怎么去解决呢？
export default {
  data() {
    return {
      data,
      searchText: '',
      searchInput: null,
      searchedColumn: '',
      columns: [
        {
          title: 'Name',
          dataIndex: 'name',
          key: 'name',
          scopedSlots: {
            filterDropdown: 'filterDropdown',
            filterIcon: 'filterIcon',
            customRender: 'customRender',
          },
          onFilter: (value, record) =>
            record.name
              .toString()
              .toLowerCase()
              .includes(value.toLowerCase()),
          onFilterDropdownVisibleChange: visible => {
            if (visible) {
              setTimeout(() => {
                this.searchInput.focus();
              }, 0);
            }
          },

//  这里是我遍历代码
  <a-table
        :pagination="{ pageSize: 10 }"
        :scroll="{ y: 300 }"
        :columns="outDataColumns"
        :data-source="tableData.simpleData.columnData"
        bordered
      >

  computed: {
    outDataColumns: function () {
      const _this = this
      const arr = []
      for (var i = 0; i < _this.tableData.simpleData.columnName.length; i++) {
        const obj = {
          title: '',
          dataIndex: '',
          scopedSlots: {
            filterDropdown: 'filterDropdown',
            filterIcon: 'filterIcon',
            customRender: 'customRender'
          }
        }
        obj.title = _this.tableData.simpleData.columnName[i]
        obj.dataIndex = _this.tableData.simpleData.columnName[i]
        arr.push(obj)
      }
      console.log(_this.tableData.simpleData.columnName)
      console.log('aaa', arr)
      return arr
    }
  },