vue实现静态数据分页及模糊查询

<el-dialog :visible.sync="mcsDialogVisible" width="70%" height="auto" :before-close="handleClose">
      <div style="text-align: center;">
        <h1>列表</h1>
      </div>
      <br/>
      <div style="text-align: center;">
        <span style="font-size: 15px;margin-right: 20px;">商户代码:</span>
        <el-input placeholder="请输入商户代码" v-model="staticMerchantCode"
                  style="width: 180px;height: 20px;text-align: center;margin-right: 20px;"></el-input>
        <span style="font-size: 15px;margin-right: 20px;">收单机构号:</span>
        <el-input placeholder="请输入收单机构号" v-model="staticAcceptIIN"
                  style="width: 180px;height: 20px;text-align: center;margin-right: 20px;"></el-input>
        <el-button type="primary" icon="el-icon-add" style="height: 36px;margin-right: 80px;width: 100px;" size="mini"
                   @click="querySMCList">查询
        </el-button>
      </div>
      <br/>
      <el-table
        :data="mCTableData.slice((currentPage-1)*pagesize,currentPage*pagesize)"
        border
        style="width: 100%">
        <el-table-column
          fixed
          prop="merchantCode"
          align="center"
          label="商户代码"
          min-width="50%">
        </el-table-column>
        <el-table-column
          prop="acceptIIN"
          align="center"
          label="收单机构号"
          min-width="50%">
        </el-table-column>
      </el-table>
      <el-row>
        <el-col :span="24">
          <el-pagination background @size-change="handleSizeChange" @current-change="handleCurrentChange"
                         :current-page="1" :page-sizes="[10, 20, 30, 40, 50]" :page-size="10"
                         layout="->,total, sizes, prev,pager,next, jumper" :total="mCTableData.length">
          </el-pagination>
        </el-col>
      </el-row>
    </el-dialog>

export default {
    data() {
      return {
        mCTableData: [],
        mcsDialogVisible: false,
        staticMerchantCode: '',        
        staticAcceptIIN: '',
        currentPage: 1,
        pagesize: 10,
        merchantCodeContents: [
                {
                    "merchantCode": "601039231826951",
                    "acceptIIN": "26110392",
                },
                {
                    "merchantCode": "601039231827017",
                    "acceptIIN": "26110392",
                },
                {
                    "merchantCode": "601039231827041",
                    "acceptIIN": "26110392",
                },
                {
                    "merchantCode": "601039231827181",
                    "acceptIIN": "26110392",
                },{
                    "merchantCode": "601039231826951",
                    "acceptIIN": "26110392",
                },
                {
                    "merchantCode": "601039231827017",
                    "acceptIIN": "26110392",
                },
                {
                    "merchantCode": "601039231827041",
                    "acceptIIN": "26110392",
                },
                {
                    "merchantCode": "601039231827181",
                    "acceptIIN": "26110392",
                },{
                    "merchantCode": "601039231826951",
                    "acceptIIN": "26110392",
                },
                {
                    "merchantCode": "601039231827017",
                    "acceptIIN": "26110392",
                },
                {
                    "merchantCode": "601039231827041",
                    "acceptIIN": "26110392",
                },
                {
                    "merchantCode": "601039231827181",
                    "acceptIIN": "26110392",
                }
          ],
      }
    },
    methods: { 
        handleSizeChange(val) { 
        this.pagesize = val;
      },
      handleCurrentChange(val) {
        this.currentPage = val;
      },
      //展示对话框
      getStaticMcList() {
        this.mcsDialogVisible = true;
        this.mCTableData = this.merchantCodeContents;
      },
      //查询方法 
      querySMCList() {
        let mc = this.staticMerchantCode;
        let IIN = this.staticAcceptIIN;
        if ((mc != null && mc != '') || (IIN != null && IIN != '')) {
          let newItem = [];
          if (mc != '' && IIN != '') {
            this.merchantCodeContents.map(function (item) {
              if (item.merchantCode.search(mc) != -1 && item.acceptIIN.search(IIN) != -1) {
                newItem.push(item);
              }
            });
          } else if (mc != '' || IIN != '') {
            this.merchantCodeContents.map(function (item) {
              if ((item.merchantCode.search(mc) != -1 && mc != '') ||  (item.acceptIIN.search(IIN) != -1 && IIN != '')) {
                newItem.push(item);
              }
            });
          }
          this.mCTableData = newItem;
        } else {
          this.mCTableData = this.merchantCodeContents;
        }
    }
}