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

  

 

posted @ 2020-07-21 14:42  张艳涛&java  阅读(1245)  评论(0编辑  收藏  举报