ant-design-vue 搜索表格数据

<a-input placeholder="请输入名字搜索" v-model="name"></a-input>
<a-button @click="search">搜索</a-button>

<a-table :columns="columns" :data-source="data"></a-table>

设置表格数据；给搜索框数据去空格，并做模糊包含查询。

const columns = [
  {
    title: 'Name',
    dataIndex: 'name',
    key: 'name',
    scopedSlots: { customRender: 'name' },
  },
  {
    title: 'Age',
    dataIndex: 'age',
    key: 'age',
    width: 80,
  },
  {
    title: 'Address',
    dataIndex: 'address',
    key: 'address 1',
    ellipsis: true,
  },
  {
    title: 'Long Column Long Column Long Column',
    dataIndex: 'address',
    key: 'address 2',
    ellipsis: true,
  },
  {
    title: 'Long Column Long Column',
    dataIndex: 'address',
    key: 'address 3',
    ellipsis: true,
  },
  {
    title: 'Long Column',
    dataIndex: 'address',
    key: 'address 4',
    ellipsis: true,
  },
];

const data = [
  {
    key: '1',
    name: 'John Brown',
    age: 32,
    address: 'New York No. 1 Lake Park, New York No. 1 Lake Park',
    tags: ['nice', 'developer'],
  },
  {
    key: '2',
    name: 'Jim Green',
    age: 42,
    address: 'London No. 2 Lake Park, London No. 2 Lake Park',
    tags: ['loser'],
  },
  {
    key: '3',
    name: 'Joe Black',
    age: 32,
    address: 'Sidney No. 1 Lake Park, Sidney No. 1 Lake Park',
    tags: ['cool', 'teacher'],
  },
];

const originData = data;

export default {
  data() {
    return {
      data,
      columns,
      originData,
      name:'',
    };
  },
  
  methods: {
    search() {
      let {data, orginData} = this
      let serName = this.name ? this.name.toLowerCase().trim() : ''
      data = originData.filter(item => {
      if(item.name.toString().toLowerCase().indexOf(serName)) {
        return item
      }
    }
  }
};