vxe-table设置自由添加筛选某一列并且可选择筛选条件

在Vue Element Plus的vxe-table组件中，如果你想允许用户自由添加筛选并可以选择筛选条件，可以利用`filterable`属性以及自定义的`filter-method`函数。以下是基本步骤：

1. 首先，在`<x-table>`标签上设置`filterable`属性为`true`，表示该列支持筛选：

<x-table :data="tableData" :columns="columns" filterable></x-table>

2. 定义`columns`数组时，针对需要筛选的列，添加筛选配置，例如：

const columns = [
  {
    field: 'name',      // 列名或字段
    title: '姓名',
    filterable: true,  // 启用筛选
  },
  ...
]

3. 接下来，创建一个`filter-method`方法，这个方法会在用户输入筛选条件时被调用，你可以在这里处理用户的筛选逻辑：

methods: {
  customFilterMethod(value, column) {
    if (column.field === 'name') { // 只对'姓名'列进行自定义筛选
      return this.tableData.filter(row => row.name.includes(value));
    } else {
      return this.tableData; // 如果不是你需要自定义筛选的列，返回原始数据
    }
  }
},

4. 将`customFilterMethod`绑定到`filter-method`属性上：

<x-table :data="tableData" :columns="columns" filter-method="customFilterMethod"></x-table>

现在，用户可以在'姓名'列的筛选框中输入文本，系统会根据自定义的过滤方法显示匹配的结果。