效果:

 组件代码:

<template>
    <div>
    <!-- 搜索框加按钮 -->
<el-input placeholder="请搜索关键词" prefix-icon="el-icon-search" v-model="keyword"></el-input>
<el-button class="searchbtn" @click="search">搜索</el-button>
<!-- 数据 -->
<ul>
    <li v-for="(item,index) in agentlisttwo" :key="item.id" >
          <p>{{item.userID}}</p>
          <p>{{item.agentnum}}</p>
          <p>{{item.username}}</p>
          <p>{{item.phone}}</p>
    </li>
</ul>
    </div>
</template>

 <script>
    
    export default {
      data() {
        return {
            keyword:'',//搜索关键词
            agentlisttwo:'',//搜索重定义数组
            agentlist: [{
                userID: "1240",
                agentnum: "22",
                username: "张无忌",
                phone: "13112345678",
            },{
                userID: "1241",
                agentnum: "23",
                username: "林平之",
                phone: "13114785236",
            },{
                userID: "1242",
                agentnum: "24",
                username: "令狐冲",
                phone: "13196584589",
            },{
                userID: "1243",
                agentnum: "25",
                username: "独孤求败",
                phone: "13115963256",
            },{
                userID: "1244",
                agentnum: "26",
                username: "包租婆",
                phone: "13110254523",
            },{
                userID: "1245",
                agentnum: "27",
                username: "韦小宝",
                phone: "13187455236",
            },{
                userID: "1246",
                agentnum: "28",
                username: "小燕子",
                phone: "13174552223",
            },{
                userID: "1247",
                agentnum: "29",
                username: "花无期",
                phone: "13174586358",
            }],   
        }
      },

      // 创建完成时
      created() {
           //重定义数组
           this.agentlisttwo =  this.agentlist;
      },

      methods: {

            search(){
                //搜索
                var keyword = this.keyword;
                if (keyword) {
                        this.agentlisttwo =  this.agentlist.filter(function(agentlist) {
                            return Object.keys(agentlist).some(function(key) {
                                return String(agentlist[key]).toLowerCase().indexOf(keyword) > -1
                            })
                        })
                }else{
                    this.agentlisttwo =  this.agentlist;
                }
            },
            
      },
    }

</script>

<style scoped>
p{
    width: 300px;
    height: 30px;
    line-height: 30px;
    border:1px solid black;
    text-align: center;
}
.p1{
    color: red;
}
</style>

 

Logo

前往低代码交流专区

更多推荐