element UI 框架select选择器filter-method方法

1.使用方法

element UI 框架中的 select 选择器提供了 filter-method 方法用于自定义过滤选项的方式。该方法将一个参数传递给方法，该参数包含以下属性：

• value：输入框中的值
• option：当前遍历的选项对象，包含 label 和 value 属性

该方法应该返回一个布尔值，用于指示是否应该将该选项包含在过滤后的列表中。

下面是一个使用 filter-method 方法的示例：

<el-select v-model="selectedOption" filterable :filter-method="filterOption">
  <el-option v-for="option in options" :key="option.value" :label="option.label" :value="option.value"></el-option>
</el-select>

...

data() {
  return {
    selectedOption: '',
    options: [
      { label: 'Option 1', value: 'option1' },
      { label: 'Option 2', value: 'option2' },
      { label: 'Option 3', value: 'option3' },
      { label: 'Option 4', value: 'option4' },
      { label: 'Option 5', value: 'option5' }
    ]
  }
},
methods: {
  filterOption(query, option) {
    return option.label.toLowerCase().indexOf(query.toLowerCase()) >= 0
  }
}

在这个示例中，我们使用了 filterable 属性来启用过滤功能，并将 filter-method 绑定到一个名为 filterOption 的方法上。这个方法检查选项的标签是否包含输入框中的值，如果包含，则返回 true，否则返回 false。这样，只有包含查询字符串的选项才会显示在下拉列表中。

2.filter-method方法第二个参数

如果在使用 filter-method 方法时，将第二个参数 option 打印出来结果为 undefined，可能是因为传递的参数不正确。

请确保 filter-method 方法的签名为 (query: string, option: object) => boolean，即确保方法接收两个参数并返回一个布尔值。在 el-select 中，query 表示输入框中的值，而 option 是当前遍历的选项对象，包含 label 和 value 属性。

在您的代码中可以尝试打印一下 filter-method 方法的参数，以确定参数是否正确传递。如下所示：

<el-select v-model="selectedOption" filterable :filter-method="filterOption">
  <el-option v-for="option in options" :key="option.value" :label="option.label" :value="option.value"></el-option>
</el-select>

...

data() {
  return {
    selectedOption: '',
    options: [
      { label: 'Option 1', value: 'option1' },
      { label: 'Option 2', value: 'option2' },
      { label: 'Option 3', value: 'option3' },
      { label: 'Option 4', value: 'option4' },
      { label: 'Option 5', value: 'option5' }
    ]
  }
},
methods: {
  filterOption(query, option) {
    console.log('query:', query)
    console.log('option:', option)
    return option.label.toLowerCase().indexOf(query.toLowerCase()) >= 0
  }
}

这样，在选择器中输入查询条件时，可以在控制台中查看输出的 query 和 option 的值。如果 option 的值确实为 undefined，请检查 options 数组中的对象是否包含 label 和 value 属性，并重新确认方法中传递的参数是否正确。

3.如果打印出来还是为undefined

如果使用 filter-method 方法时，只需要判断输入框中的值是否匹配选项中的某些属性，而不需要访问 option 参数的属性值，可以简单地将 filter-method 方法的第二个参数设置为 null。示例如下：

<el-select v-model="selectedOption" filterable :filter-method="filterOption">
  <el-option v-for="option in options" :key="option.value" :label="option.label" :value="option.value"></el-option>
</el-select>

...

data() {
  return {
    selectedOption: '',
    options: [
      { label: 'Option 1', value: 'option1' },
      { label: 'Option 2', value: 'option2' },
      { label: 'Option 3', value: 'option3' },
      { label: 'Option 4', value: 'option4' },
      { label: 'Option 5', value: 'option5' }
    ]
  }
},
methods: {
  filterOption(query) {
    return option.label.toLowerCase().indexOf(query.toLowerCase()) >= 0
  }
}

在这个示例中，我们将 filter-method 方法的第二个参数设置为 null，只需要传递输入框中的值，然后检查选项的标签是否包含该值。这种方法可能会提高性能，因为它会避免遍历 option 对象的过程。