<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;
}
}
}
vue实现静态数据分页及模糊查询
最新推荐文章于 2024-05-06 10:59:29 发布