ant design vue 表格 过滤

背景

使用ant design vue 的table组件，不分页，通过输入框对table中的数据进行筛选。

原始数据

过滤后的数据

解决方案

export default {
  mounted() {
    this.fetch();
  },
  data() {
    return {
      title: "",
      data: []
    };
  },
  computed: {
    columns() {
      const column = [
        {
          title: "标签名称",
          dataIndex: "title",
          align: "center",
          filteredValue: this.title ? [this.title] : null,
          onFilter: (value, record) => record.title.indexOf(value) >= 0
        },
        {
          title: "标签简介",
          dataIndex: "summary",
          align: "center"
        },
        {
          title: "创建时间",
          dataIndex: "created_at",
          align: "center"
        },
        {
          title: "操作",
          dataIndex: "operation",
          scopedSlots: { customRender: "operation" },
          align: "center"
        }
      ];
      return column;
    }
  },
  methods: {
    nameChange() {
      this.refresh();
    },
    refresh() {
      this.fetch();
    },
    fetch(params = {}) {
      ...
    }
  }
};

关键代码

  	filteredValue: this.title ? [this.title] : null,
	onFilter: (value, record) => record.title.indexOf(value) >= 0

filteredValue 的值 需要是数组格式或者null

源码：