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
            },
    

      

     

  • 相关阅读:
    python操作excel表格
    重学Java
    重学Java
    重学Java
    重学Java
    重学Java
    博客园自定义主题及目录组件
    重学Java
    修改 Eclipse 背景颜色的高级方法
    dbf转excel
  • 原文地址:https://www.cnblogs.com/zytcomeon/p/13354954.html
Copyright © 2011-2022 走看看