vue 实现模糊检索并根据其他字符的首字母顺序排列

实现模糊检索并根据其他字符的首字母顺序排列是前端开发中比较常见的需求之一，在 Vue 中也有很好的实现方式。

1.实现模糊检索功能

实现模糊检索的核心点是在数据源上进行筛选。假设我们有一个表格数据源：

[
  { name: '张三', age: 21 },
  { name: '李四', age: 22 },
  { name: '王五', age: 23 },
  { name: '赵六', age: 24 },
  { name: '田七', age: 25 }
]

我们可以通过输入关键字，筛选出符合要求的数据源；Vue 中使用计算属性来实现模糊检索：

<template>
    <div>
        <input type="text" v-model="keyword" placeholder="请输入关键字">
        <ul>
            <li v-for="item in filterData">{{item.name}}： {{item.age}}</li>
        </ul>
    </div>
</template>
<script>
export default {
    data() {
        return {
            tableData: [
                { name: '张三', age: 21 },
                { name: '李四', age: 22 },
                { name: '王五', age: 23 },
                { name: '赵六', age: 24 },
                { name: '田七', age: 25 }
            ],
            keyword: ''
        }
    },
    computed: {
        filterData() {
            const keyword = this.keyword.toLowerCase()
            return this.tableData.filter(item => item.name.toLowerCase().includes(keyword))
        }
    }
}
</script>

在这个例子中，我们通过 v-model 绑定 input 框中的关键字，并通过 computed 计算属性来实时筛选符合要求的数据。

2. 根据首字母顺序排列

除了实现模糊检索外，有时我们还需要根据其他字符的首字母顺序排列数据；Vue 中使用 Array.sort() 来排序，需要自定义一个排序函数。

<template>
    <div>
        <input type="text" v-model="keyword" placeholder="请输入关键字">
        <ul>
            <li v-for="item in sortData">{{item.name}}： {{item.age}}</li>
        </ul>
    </div>
</template>
<script>
export default {
    data() {
        return {
            tableData: [
                { name: '张三', age: 21 },
                { name: '李四', age: 22 },
                { name: '王五', age: 23 },
                { name: '赵六', age: 24 },
                { name: '田七', age: 25 }
            ],
            keyword: ''
        }
    },
    computed: {
        filterData() {
            const keyword = this.keyword.toLowerCase()
            return this.tableData.filter(item => item.name.toLowerCase().includes(keyword))
        },
        sortData() {
            return this.filterData.sort((a, b) => {
                return a.name.localeCompare(b.name, "zh-Hans-CN",{sensitivity: "accent"})
            })
        }
    }
}
</script>

在这个例子中，我们在计算属性 sortData 中使用了 Array.sort()，并自定义了一个排序函数；其中 a.localeCompare(b, "zh-Hans-CN", {sensitivity: "accent"}) 表示中文首字母的排序方式。

值得注意的是，上例中的排序方式是按照中文首字母的顺序排序，如果需要根据拼音首字母排序，可以使用pinyin.js库等插件。