zoukankan      html  css  js  c++  java
  • vue-- 利用过滤-实现搜索框的姓名的搜索

     
                <div class="fl w-200 m-l-30">
                    <el-input placeholder="输入用户名" v-model="searchData">
                        <el-button slot="append"  icon="el-icon-search" @click="search()">搜索</el-button>
                    </el-input>
                </div>
    
    --------------------------------
        export default {
            data() {
                return {
                    tableData: [],
                    dataCount: null,
                    currentPage: null,
                    realname: '',
                    multipleSelection: [],
    
                    page_size:7,
                    currentpagezyt:1,
                    list:[],
                    total:null, //和:total对应
                    searchData: "",
                }
            },
        methods: {
          search() {
            this.page=1;
            this.getList();
          },
    -------------------------
    //处理数据
            getList() {
                //es6过滤得到满足搜索条件的展示数据list
                let list = this.tableData.filter((item, index) =>
                    item.userName.includes(this.searchData)
                )//取每一个item,看看item的userName属性equal(input内的searchData)
    
                this.list = list.filter((item, index) =>
                    index < this.page * this.limit && index >= this.limit * (this.page - 1)
                )
                this.total = list.length
            },
    

      

     

  • 相关阅读:
    企业云盘安全性如何 怎样部署
    Sentinel 控制台部署
    nginx代理静态页面添加二级目录
    java socket
    IDEA
    golang代码生成器
    es 单节点问题
    代码模板
    错误摘要 HTTP 错误 403.14
    安装.Net Framework 4.6.2无法安装的2种情况
  • 原文地址:https://www.cnblogs.com/zytcomeon/p/13354954.html
Copyright © 2011-2022 走看看