{
    data () {
        return {
            page: {
                pageOffset: 1, // 分頁(yè)頁(yè)碼, 默認(rèn)第一頁(yè)
                pageCount: 20, // 一頁(yè)的頁(yè)數(shù), 默認(rèn)20
            },
            allData: [], // 表格所有數(shù)據(jù)的數(shù)據(jù)源
            tableData: [] // 表格數(shù)據(jù)源
        }
    },
    methods: {
        // 添加按鈕，彈窗一系列操作后，點(diǎn)擊確定保存數(shù)據(jù)，調(diào)用的方法
        saveData (data) {
            if (!data) return
            this.allData.push(data)
            this.paging()
        },
        // 點(diǎn)擊第一頁(yè)，第二頁(yè)的監(jiān)聽(tīng)方法
        pageChange (pageOffset) {
          this.page.pageOffset = pageOffset
          this.paging()
        },
        // 分頁(yè)方法
        paging () {
            const pageOffset = this.page.pageOffset // 頁(yè)碼
            const pageCount = this.page.pageCount // 一頁(yè)顯示多少個(gè)數(shù)據(jù)
            this.tableData = this.allData.slice((pageOffset - 1) * pageCount, pageOffset * pageCount)
        }
    }
}

// 查詢(xún)數(shù)據(jù)
// val:  輸入框查詢(xún)的值
// data: 查詢(xún)的數(shù)據(jù)源
// fuzzySearch: 是否是模糊查詢(xún)
function search (key, val, data, fuzzySearch = false) {
      const searchTxt = val.trim()
      if (searchTxt === '') {
        return data
      }
      // 如果以空格隔開(kāi)的話，則表示可以多值過(guò)濾
      if (searchTxt && ~searchTxt.indexOf(' ')) {
        let searchTxtArr = searchTextToArr(searchTxt)
        return data.filter((o) => {
          return ~searchTxtArr.indexOf(o[key])
        })
      } else {
        // 單值過(guò)濾
        return data.filter((o) => {
          // 是否是模糊查詢(xún)
          return fuzzySearch ? ~o[key].indexOf(searchTxt) : searchTxt === o[key]
        })
      }
}
// 把多選查詢(xún)條件變成數(shù)組
function searchTextToArr (str) {
    let text = str.trim()
    // 過(guò)濾掉多余的空格, 比如 '男  女' 中間多輸入了一個(gè)空格的情況.
    return text.split(' ').filter((o) => {
        return o === '0' || o
    })
}
// 數(shù)據(jù)
const data = [
    {name: 'james', sex: '男'},
    {name: 'nancy', sex: '女'},
    {name: 'bob', sex: '男'},
    {name: 'allen', sex: '男'},
    {name: 'jack', sex: '男'},
    {name: 'jasmine', sex: '女'},
]
// 測(cè)試
search('name', 'jack   jasmine', data) // [{"name":"jack","sex":"男"},{"name":"jasmine","sex":"女"}]
search('name', ' allen ', data) // [{"name":"allen","sex":"男"}]
search('name', 'j', data, true) // [{"name":"james","sex":"男"},{"name":"jack","sex":"男"},{"name":"jasmine","sex":"女"}]