Vue Select 框中展示少量数据并实现搜索功能

可以使用带有过滤功能的 select 组件，例如 element-ui 中的 el-select 组件，通过设置 filterable 属性来开启过滤功能。同时，可以设置一个最大的展示条数，例如 4 条，然后在输入框中输入关键字进行搜索，只展示符合条件的数据。

具体的实现方法如下：

在 data 中添加一个新属性，用于保存搜索关键字：

data() {
  return {
    filter: {
      tcl_os_version: '',
      // 其他属性
    },
    // 保存搜索关键字
    keyword: '',
    // 其他属性
  }
}

在 el-select 组件中添加 filterable 属性，设置最大展示条数为 4 条：

<el-select v-model='filter.tcl_os_version' clearable :placeholder='filter.plate_form === 'TV' ? '请选择系统版本' : '请选择RomVersion'' filterable class='el-input' @keyup.enter.native='search' :filter-method='filterMethod' popper-class='select-popper'>
  <el-option v-for='item in tclOsVersionList' :key='item' :label='item' :value='item'></el-option>
</el-select>

注意：这里还添加了一个 popper-class 属性，用于样式控制。

在 methods 中添加 filterMethod 方法，用于过滤数据：

methods: {
  // 过滤方法
  filterMethod(query, item) {
    // 如果没有关键字，则直接返回 true
    if (!query) {
      return true;
    }
    // 如果关键字在选项中出现，则返回 true
    return item.toLowerCase().indexOf(query.toLowerCase()) !== -1;
  },
  // 搜索方法
  search() {
    // 保存搜索关键字
    this.keyword = this.filter.tcl_os_version;
  }
}

这里 filterMethod 方法用于过滤数据，如果没有关键字，则直接返回 true，否则如果关键字在选项中出现，则返回 true。search 方法用于保存搜索关键字。

在 el-select 组件中添加一个插槽，用于自定义下拉列表的内容：

<el-select v-model='filter.tcl_os_version' clearable :placeholder='filter.plate_form === 'TV' ? '请选择系统版本' : '请选择RomVersion'' filterable class='el-input' @keyup.enter.native='search' :filter-method='filterMethod' popper-class='select-popper'>
  <template slot='dropdown-item' slot-scope='{ item }'>
    <span v-html='highlight(item)'></span>
  </template>
  <el-option v-for='item in tclOsVersionList' :key='item' :label='item' :value='item'></el-option>
</el-select>

这里添加了一个名为 dropdown-item 的插槽，并绑定了一个 highlight 方法，用于高亮匹配的关键字。

在 methods 中添加 highlight 方法，用于高亮匹配的关键字：

methods: {
  // 过滤方法
  filterMethod(query, item) {
    // 如果没有关键字，则直接返回 true
    if (!query) {
      return true;
    }
    // 如果关键字在选项中出现，则返回 true
    return item.toLowerCase().indexOf(query.toLowerCase()) !== -1;
  },
  // 搜索方法
  search() {
    // 保存搜索关键字
    this.keyword = this.filter.tcl_os_version;
  },
  // 高亮关键字
  highlight(value) {
    // 如果没有关键字，则直接返回原值
    if (!this.keyword) {
      return value;
    }
    // 高亮匹配的关键字
    const pattern = new RegExp(this.keyword, 'ig');
    return value.replace(pattern, '<span style="color:red">$&</span>');
  }
}

这里 highlight 方法用于高亮匹配的关键字，如果没有关键字，则直接返回原值，否则用正则表达式匹配关键字，然后用 span 标签进行高亮。

这样就可以实现只展示 4 条数据，其他数据通过搜索方法展示的效果。