后台管理系统的查询和弹出对话框demo

效果图：

template：

 <div class="container">
    <el-form ref="form" label-width="80px" label-position="left">
      <el-row :gutter="20">
        <el-col :span="6"><el-form-item label="a"><el-input v-model="a" style=" 200px;"></el-input></el-form-item></el-col>
        <el-col :span="6">
          <el-form-item label="b">
            <el-date-picker v-model="a" type="date" format="yyyy-MM-dd" value-format="yyyy-MM-dd" style=" 200px;"></el-date-picker>
          </el-form-item>
        </el-col>
      </el-row>
      <div style="padding-bottom:18px;">
        <el-button type="primary"  @click="search" v-loading.fullscreen.lock="fullscreenLoading">查询</el-button>
      </div>
    </el-form>
    <el-table :data="tableData" border style=" 100%">
        <el-table-column prop="userId" label="用户ID" align='center'>
        </el-table-column>
        <el-table-column label="操作历史" align='center'>
          <template slot-scope="scope">
            <a @click="history(scope.row.userId)">历史</a>
          </template>
        </el-table-column>
    </el-table>
    <div class="pagination">
        <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="currentPage"
            :page-sizes="[10, 20]"
            :page-size="pagesize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="totalCount">
        </el-pagination>
    </div>
    <el-dialog :visible.sync="dialogVisible" width="1000px">
      <el-table :data="historyData" border style=" 100%">
        <el-table-column property="a" label="绑卡时间"></el-table-column>
      </el-table>
      <div class="pagination">
          <el-pagination
              @size-change="handleSizeChange2"
              @current-change="handleCurrentChange2"
              :current-page="currentPage2"
              :page-sizes="[10, 20]"
              :page-size="pagesize2"
              layout="total, sizes, prev, pager, next, jumper"
              :total="totalCount2">
          </el-pagination>
      </div>
    </el-dialog>
  </div>

data:

fullscreenLoading:false,
//查询字段
a:'',
//查询表格
tableData:[],
historyData:[],
//弹出框
dialogVisible:false,
//分页
totalCount:0,
currentPage:1,
pagesize:10,
totalCount2:0,
currentPage2:1,
pagesize2:10,
userId:'',

methods:

      //查询
      search:function(){
        var self = this;
        self.currentPage = 1;
        self.searchAjax();
      },
      searchAjax:function(){
        var self = this;
        self.fullscreenLoading = true;
        self.$axios.post(self.$global.PAYMENTCENTER_HOST+'/customerBindBankList',{
            a:self.a,
            limit:self.pagesize,
            offset:(self.currentPage-1)*self.pagesize
        },
        {
            headers: {
                'SALE-TOKEN': localStorage.getItem('TOKEN')
            }
        }
        ).then((response) => {
            if(response.data.status==0){
                self.fullscreenLoading = false;
                self.tableData = response.data.result.rows;
                self.totalCount = response.data.result.total;
            }else{
                self.fullscreenLoading = false;
                self.$message({
                    message: response.data.message,
                    type: 'warning'
                });
                return false;
            }
        }, (response) => {
                self.fullscreenLoading = false;
                self.$message({
                    message: response.data.message,
                    type: 'warning'
                });  
                return false;
        })

      },
      handleSizeChange(size) {
        this.pagesize=size;
        this.searchAjax();
      },
      handleCurrentChange(currentPage){
        this.currentPage=currentPage;
        this.searchAjax();
      },
      //历史
      history:function(userId){
        var self = this;
        self.userId = userId;
        self.currentPage2 = 1;
        self.dialogVisible = true;
        self.historyAjax();
      },
      historyAjax:function(){
        var self = this;
        self.$axios.post(self.$global.PAYMENTCENTER_HOST+'/customerBindBankHistoryList',{
            userId:self.userId,
            limit:self.pagesize2,
            offset:(self.currentPage2-1)*self.pagesize2
        },
        {
            headers: {
                'SALE-TOKEN': localStorage.getItem('TOKEN')
            }
        }
        ).then((response) => {
            if(response.data.status==0){
                self.historyData = response.data.result.rows;
                self.totalCount2 = response.data.result.total;
            }else{
                self.$message({
                    message: response.data.message,
                    type: 'warning'
                });
                return false;
            }
        }, (response) => {
                self.$message({
                    message: response.data.message,
                    type: 'warning'
                });  
                return false;
        })
      },
      handleSizeChange2(size) {
        this.pagesize2=size;
        this.historyAjax();
      },
      handleCurrentChange2(currentPage){
        this.currentPage2=currentPage;
        this.historyAjax();
      },

css:

a{
  color:blue;
  text-decoration:underline;
  cursor:pointer;
}