1 line
1.0 MiB
JSON
1 line
1.0 MiB
JSON
|
{"meta":{"title":"龙儿之家","subtitle":"hexo.huangge1199.cn","description":"千里之行，始于足下","author":"轩辕龙儿","url":"https://hexo.huangge1199.cn","root":"/"},"pages":[{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{}],"posts":[{"title":"element-plus选择器自定义筛选方法（拼音首字母搜索）","slug":"element-plusxuan-ze-qi-zi-ding-yi-shai-xuan-fang-fa-pin-yin-shou-zi-mu-sou-suo","date":"2024-07-05T06:05:35.000Z","updated":"2024-07-05T06:54:48.906Z","comments":true,"path":"/post/element-plusxuan-ze-qi-zi-ding-yi-shai-xuan-fang-fa-pin-yin-shou-zi-mu-sou-suo/","link":"","excerpt":"","content":"<h1 id=\"引言\"><a href=\"#引言\" class=\"headerlink\" title=\"引言\"></a>引言</h1><p>最近，来了个需求，需要在下拉列表中做筛选。下拉列表显示的是中文，但筛选时可能会输入中文的拼音首字母。因此，需要实现一个筛选功能，能够根据拼音首字母筛选出匹配的选项。</p>\n<h1 id=\"自定义筛选方法\"><a href=\"#自定义筛选方法\" class=\"headerlink\" title=\"自定义筛选方法\"></a>自定义筛选方法</h1><p>前端使用的是 <a href=\"https://cn.vuejs.org/guide/introduction.html\">vue3</a> 和 <a href=\"https://element-plus.org/zh-CN/component/overview.html\">element-plus</a>。我使用的组件是 <a href=\"https://element-plus.org/zh-CN/component/select.html\">Select 选择器 | Element Plus</a> 。为 <code>el-select</code> 添加 <code>filterable</code> 属性即可启用搜索功能。默认情况下，Select 会找出所有 <code>label</code> 属性包含输入值的选项。但这里需要匹配拼音首字母进行搜索，因此要通过传入一个 <code>filter-method</code> 来实现。<code>filter-method</code> 是一个函数，它会在输入值发生变化时调用，参数为当前输入值。</p>\n<p>下面是这部分的简短代码：</p>\n<p>vue部分：</p>\n<pre class=\"line-numbers language-vue\" data-language=\"vue\"><code class=\"language-vue\"><el-select\n v-model="queryParams.word"\n filterable\n placeholder="请输入"\n clearable\n :filter-method="filterMethod"\n >\n <el-option\n v-for="word in words"\n :key="word"\n :label="word"\n :value="word"\n />\n</el-select>/el-form-item></code></pre>\n<p>JS部分：</p>\n<pre class=\"line-numbers language-javascript\" data-language=\"javascript\"><code class=\"language-javascript\">const showSearch = ref(true);\n// option选项\nconst words = ref(['你好', '世界', '中国', '中国最棒'])\n// 保留原始的option选项\nconst wordsOld = ref(['你好', '世界', '中国', '中国最棒'])\n\nconst data = reactive({\n queryParams: {\n word: null,\n },\n});\n\nconst { queryParams } = toRefs(data);\n\n// 多选框选中数据\nfunction filterMethod(val){\n // 如果有输入值，根据输入内容进行筛选\n if(val){\n // 先将option中的选项words清空\n words.value = []\n // 从原始的option选项中遍历筛选\n wordsOld.value.forEach(word => {\n // 添加筛选逻辑，满足的word添加到words中显示\n words.value.push(word)\n })\n } else {\n // 如果没有输入值，恢复成原始的option选项\n words.value = wordsOld.value\n }\n}</code></pre>\n<h1 id=\"拼音首字母匹配\"><a href=\"#拼音首字母匹配\" class=\"headerlink\" title=\"拼音首字母匹配\"></a>拼音首字母匹配</h1><p>可以使用 <code>pinyin-pro</code> 来实现拼音匹配，例子如下：</p>\n<pre class=\"line-numbers language-javascript\" data-language=\"javascript\"><code class=\"language-javascript\">import { pinyin } from 'pinyin-pro
|