基于Element UI select组件实现同时支持通过label和value过滤列表

element ui的select组件设置filterable后, 默认支持的是通过label来进行过滤搜索, 那么如何让value也支持过滤呢?
官方文档上提供了filter-method来自定义搜索方法, 还需要一个visible-change(下拉框出现/隐藏时触发)的事件来实现功能.

预览效果

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
</head>
<body>
  <div id="app">
    <el-select v-model="value" filterable :filter-method="value => (keyword = value)" @visible-change="() => (keyword = '')" >
      <el-option v-for="item in list" :key="item.value" :label="item.label" :value="item.value"  />
    </el-select>
  </div>
  <script src="https://unpkg.com/vue/dist/vue.js"></script>
  <script src="https://unpkg.com/element-ui/lib/index.js"></script>
  <script>
    new Vue({
      el: '#app',
      data() {
        return {
          value: 1,
          keyword: ''
        }
      },
      computed: {
        basicList() {
          return [
            { label: 'Timmy', value: 1 },
            { label: 'Judd', value: 2 },
            { label: 'Dequan', value: 3 },
            { label: 'Olin', value: 4 },
            { label: 'Bear', value: 5 },
            { label: 'Caesar', value: 6 },
            { label: 'Davi', value: 7 },
            { label: 'Wisdom', value: 8 },
            { label: 'Pavel', value: 9 },
            { label: 'Alain', value: 10 }
          ]
        },
        list() {
          if (this.keyword === '') {
            return this.basicList;
          } else {
            return this.basicList.filter(item => {
              return ( 
                String(item.label)
                  .toUpperCase()
                  .includes(this.keyword.toUpperCase()) ||
                String(item.value)
                  .toUpperCase()
                  .includes(this.keyword.toUpperCase())
              )  
            })
          }
        }
      }
    })
  </script>
</body>
</html>

基于Element UI select组件实现同时支持通过label和value过滤列表

猜你喜欢