在 Vue 中使用el-input实时搜索筛选

在 Vue 中使用 el-input 实时搜索 list 中的人名,并在页面初始化时候显示所有的人名

<template>
  <div>
    <el-input v-model="searchText" placeholder="请输入搜索内容"></el-input>
    <ul>
      <li v-for="item in filteredList" :key="item.ID">{{ item.UserName }}</li>
    </ul>
  </div>
</template>

<script>
export default {
  data() {
    return {
      list: [
        { ID: 1112, UserName: "测试1" },
        { ID: 12, UserName: "测1" },
        { ID: 1, UserName: "测ste" }
      ],
      searchText: ''
    };
  },
  computed: {
    filteredList() {
      if (!this.searchText) {
        // 如果搜索框为空，则返回全部列表
        return this.list;
      } else {
        // 如果搜索框不为空，则根据搜索文本过滤列表
        return this.list.filter(item => item.UserName.includes(this.searchText));
      }
    }
  }
};
</script>