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

  

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM